• This is an e-commerce app that allows shoppers to view, sort, and filter and search products according to different criteria.
• This serves as a React, Firebase, and Framer Motion learning project. I took the design of this Behance presentation.
• Instead of using dummy API data, I used some real product data from BOOHOO's online store. firebase firestore is used to host and query the data

• react.js (create-react-app)

• SASS
• CSS (no premade components libraries)

• react-router

• firebase Auth (currently redoing authentication so login and wishlist are down )

• Firebase Firestore
• Firebase RealTime Database

• Firebase Hosting

1. Refactoring the HomeFirstVisit component, it was a quick and dirty solution to play a different animation on first visit,it's just a clone of the Home component but with a different animation

2. Adding an image skeleton Loader, currently if you have slow internet they pop up in an ugly way

3. Change the transition circles animation randomly, at the moment it's always pink and isn't faithful to the original design

From your command line, first clone this repo:

# Clone this repository
$ git clone https://github.com/Epherum/Missguided.git

# Go into the repository
$ cd Missguided

# Remove current origin repository
$ git remote remove origin

Then you can install the dependencies using NPM:

# Install dependencies
$ npm install

# Start development server
$ npm start

Happy coding!

Epherum

• GitHub
• Linkdin