Chameleon

Inspiration

A picture is worth a thousand words--during a period of time that has tested our resilience and strength, this saying has never held more truth to us. With all elements of our lives seemingly becoming more isolated, we found ourselves drawn to photos more and more, whether it be to cherish old memories or capture new ones during an unprecedented time. Photography has been a source of comfort, nostalgia, and hope for us--yet, we realized how no consolidated platform existed for photographers and clients to come together. From our own experiences, we often scrambled on different social media sites and Google searches to find photographers, only to find that they did not photograph for our occasion, were out of our price range, or located too far away. With Chameleon, we have streamlined the process of matching photographers with clients to best suit the needs of both sides. The name Chameleon stems from the versatility and adaptability of a chameleon--traits that we hope are reflected in our mission of increasing accessibility to photography, and what we encourage in our community as we persevere through these difficult times.

What it does

First, our site allows the user to select whether they are a photographer or a client. Photographers are taken to a login page, where they can select to login or sign up if they are a first time user. After signing in or creating their account, photographers are taken to the main search page. Then using the navigation bar, the photographer can also access their profile to edit how they wish to be seen, on the search page, by potential clients. What is edited here will appear as a business card on the search page, that details all provided information.

If the user is a client, they are taken directly to the main search page where they can specify their unique needs. Our site allows clients who are searching for photographers to filter based on location, and specific needs (in the form of tags) within one consolidated site that caters to clients’ specific needs in a streamlined fashion. Clients can then view the different photographers’ profiles, containing contact information and descriptions.

Our website therefore allows for a new, easy interaction between clients finding photographers, and photographers getting their name out there for clients. Chameleon will allow for greater accessibility to each individual’s photography needs, as well as aid photographers to more easily reach their designated audience, and promote freelance photography.

How I built it

Our web application was created with the React framework, which allowed us to create reusable components for more intuitive and clean UI/UX for our users. We utilized Firebase, a file storage and authentication service by Google, to manage our backend. We stored user signup information in Firebase to ensure login ran smoothly and each user’s email matched with their password that was used to originally sign up. As a photographer creates their profile, we also utilize Cloud Firestore, Firebase’s database service to store each photographer’s elements--these consisted of name, location, phone, rate, occasion, etc. We used React’s JSX to manage the logic behind our application, including routing and in regards to photographer login and data. For our front-end, we used HTML and CSS to display a consistent theme throughout our website with a simple and clean look. We included hovering and drop-down menus to incorporate even more features and options for specificity as clients searched for potential photographers to contact.

Challenges I ran into

Our first challenge was figuring out how routers worked within React. As this was our first time using React, our team needed to delve into understanding its features, and we had trouble linking our different pages. We were able to ultimately import Nav and Navbar from Bootstrap, as well as other objects from react-router-dom to correctly link our different components and pages. Another large challenge we ran into was figuring out how to store photographer data, including login information and photographer identifiers like phone, rate, location, etc. We also had issues with signup information not being stored in our database, and we discovered this was because we incorporated our own components into the system, which required more workarounds. Additionally, we ran into difficulties on the front-end when creating our search bar, as well as figuring out how to create a drop down menu that would appear when a user hovered above it.

Accomplishments that I'm proud of

We are proud of our implementation of the database system for photographer authentication when logging in as well as storing photographer information. We are also proud of our search bar functionality that allows clients/photographers to search by different photographer attributes, our edit profile feature for each photographer to personalize their unique profile and bio, as well as our final UI theme and the message we are pushing to encourage more interactions within the world of photography.

What I learned

As a team, this was our first time using React, and though we struggled to get past a learning curve at first, we were able to learn how to utilize React to produce a more flexible, powerful, and interactive website. For many of us, this was also our first look into anything relating to back-end development, and we also learned how to utilize a database and how to incorporate Firebase into our React app.

What's next for Chameleon

We are incredibly excited for the potential of Chameleon to provide a platform for photographers of all backgrounds and specializations to share their work and meet clients who are seeking their talents. We believe photographs possess the power to capture moments in times and tell stories that outlive time, and we hope our mission of versatility and resiliency also encourages our users as well. In the future, we hope to incorporate more personalized features such as options to meet new photographers based on your history, as well as profiles for clients as well to save potential photographers they find.