About
Welcome to Couture Shopping, a community centered e-commerce store dedicated to providing for the materialistic needs of anyone out there. In the wake of the COVID-19 Pandemic, spending more of our lives online is a necessity in today’s world. But the community and the fulfillment of shopping doesn’t need to go away. For this reason, we built Couture Shopping, a place where you can buy amazing products but also share your thoughts with our fellow customers.
In order to achieve our vision for this app, we used a variety of languages for their unique specificities. In order to build the shop portion of the website, we used frontend as well as Vanilla.js. We used local storage to save an array of selected projects, then we converted them into the string as per local storage’s requirement and implemented this in various parts of the website, most prevalent in the checkout and order section. For the social media part of this app, we used React.js, Node.js, Tailwind.css, andGoogle Firebase Databases, and Authentication in order to implement this public-style chat. We hosted this website onto Netlify and used the command line to debug our react app.
Overall, we hope that this project will be used as a way to bring back the sense of community in belonging that in-person shopping with family and friends has. We will further this project by adding more products for a user to buy and adding a possible payment gateway as well as community guidelines on the chat.
Explain your inspiration behind your project?
Our inspiration to build this project came from our experiences of shopping and going to in-person stores from a younger age. The memories, sharing our favorite outfits, and being with friends and family was disrupted by the COVID-19 pandemic, and through our community-based shopping experience, we hope that we can bring back these experience in a world where we are forced to do almost all recreation virtually.
What does your project do?
Couture Shopping’s main purpose is to provide a store interface and have products for every family. This design style coupled with our community social media page provides users with an all-rounded shopping experience. Our online shop resembles an e-commerce website with the ability to add to a cart and subsequently obtain a checkout summary.
How did you create your project?
This project’s technical components can be broken down into the traditional e-commerce website and the react and database-centered social media platform. For the e-commerce website, we used HTML, CSS, and Vanilla.js in order to create both our clean and aesthetically pleasing interface that is at the same time powerful through our add-to-cart and local-storge-based backend. For the Social Media portion, we used React.js, Node.js, Tailwind.css, and Google Firebase Databases and Authentication in order to create a public-facing chat that updates on the firebase server in realtime. We use both traditional react classes for our most basic functions and also employ various react hooks, especially in the theme adaptions and the send buttons. Through our study of the firebase google documentation and debugging through Netlify’s command line, we where able to successfully create this chat.
By using all of these skills and programming languages in tandem, we created an automated and cohesive web application that we believe brings the fun back into shopping.
What are some challenges you encountered?
Initially, an obstacle we had was using google firebase. This particular database software, while being simple on face level, has very specific configuration and security rules that need to be implemented. Being new to React and firebase itself, we had to take our time and work step by step inorder to make this app possible.
Another issue we had was the hosting on Netlify. This software was very specific and picky about the format and file sizes so we initially had a lot of trouble even figuring out what was going on. However, through this experience, we learned the exceptional value of the command line. We went through each of the errors step by step and were eventually able to deploy our app and even host it on netlify’s local server.
Accomplishments
As a group, we are extremely proud of the work that we’re submitting to this hackathon. We started out with just a few sketches and Figma drawings and using our knowledge and skills we were able to create what we had foreseen in those initial planning stages. We’re particularly happy with the social media chat feature as it took a significantly long time to get set up and running efficiently.
What did you learn?
As a group, we furthered our overall knowledge of React, Node, and firebase. With many of us experimenting with this software as novices, through this project we’re now at a place we are comfortable with the ins and outs of react and all the different technology that we used. On the other hand, this project also humbled us into releasing how powerful even traditional Vainlla.js can be. Through our experiences, we have grown as programmers in all aspects.
What’s next for The Dealership?
Our Next steps for Couture Shopping are to add more products to our page as well as to add community guidelines. We’re envisioning our app with more items as well as possibly a form of machine learning that helps give a user personalized products based on their interests. We also hope to implement more security rules from the firebase side onto our social media chat space.
Log in or sign up for Devpost to join the conversation.