ExpressCart

ExpressCart is a ecommerce shopping website created with React and Javascript. This website eases the process of buy and sell goods online. You can shop anything you want with the comfort of home.

Demo

Live Demo: https://react-expresscart.netlify.app

Tech Stack

Technologies: HTML, CSS, JavaScript, React, Context api, TailwindCSS

Libraries: react-router-dom, framer-motion, formik, react-icons, react-loading-skeleton

Authentication: firebase

API: https://dummyjson.com

Run Locally

Clone the project

  git clone https://github.com/PrinceSingh19/ExpressCart.git

Go to the project directory

  cd ExpressCart

Install dependencies

  npm install

Start the server

  npm run dev

To build

npm run build

To preview build

npm run preview

Deployment

To deploy this project I have used netlify

Features

Website Features

• Single page website made with react
• Login and logout functionality with firebase
• Responsive design with CSS and TailwindCSS
• Suitable for mobile and desktop screens
• Highly performant
• Code splitting using React lazy
• Error Handling
• Reusable code Product Features
• Carousel
• Easy navigation
• Search products with single click
• Add products to cart easily
• Detailed product description

Learnings from this project

1. Using lazy load in components and on routes to reduce the intial bundle size and to reduce loading time
2. Use react-loading skeleton to create the loading effect and be more consistent in user-interaction
3. Using react context api and useReducer hook to manage the state of the app
4. Use firebase to manage the authentication and implement login and logout functionality in app
5. Doing tasks asynchronously like first fetching the data from api and then performing another task based on the data received from async function ex. getProduct().then(()=> ...do task)
6. Use formik library to handle forms in react more efficiently
7. Design mega menu for md devices like laptops and pc's and menu bar for smartphones
8. More understanding of grid based layout
9. Gained more experience in responsive design
10. Better understanding of navigation using react-router-dom and use of for nested routes

🚀 About Me

I'm a passionate front end developer having experience in developing the responsive and beautiful websites. I loves to write clean code and reusable codes.

🔗 Links

Contributing

Contributions are always welcome!

Please adhere to this project's code of conduct.

Support

For support, email [email protected] or raise issue.

Feedback

If you have any feedback, please reach out to me at [email protected]

Authors

• @Prince