kartikth40 / ecommercestore

a functional ecommerce store site made using reactjs as frontend, nodejs as server and mogodb as database

Ani-cart

An ecommerce store website with all the required functionality, built with React, Redux, Nodejs, JavaScript, and CSS.

Live Link 🔗

Access my site at ani-cart

Project Status

This project is currently in development. Users can use this website on their laptops and PCs but mobile supported layout is in development.

Project Screen Shots

Home and Shop pages 👇🏻

       

       

Cart, admin dashboard and user dashboard ☝🏻

Installation and Setup Instructions

Clone down this repository. You will need node and npm installed globally on your machine.

Installation:

// frontend installation
cd client/
npm install

// backend installation
cd server/
npm install

To Start frontend or backend:

npm start

To Visit App after its started in your local machine:

localhost:3000

Reflection

This was a 4 months long project built during my third year of College. Project goals included using technologies learned up until this point by myself from different resources and familiarizing myself with documentations for new features.

Originally I just wanted to make its frontend part only in order to practice and improve my front end skills but my curiosity made me to work upon making it fully usable with the help of full fledged backend.

One of the main challenges I ran into was Authentication. This lead me to spend a few days on a research spike into OAuth, Auth0, and two-factor authentication using Firebase or other third parties. Due to time constraints, I had to use firebase authentication for easy management without dealing with complex authentication strategies and focus more on making this project more and more functional with every day I spent on it.

At the end of the day, the basic technologies implemented in this project are React, React-Router, Redux, firebase, mongodb, and a significant amount of VanillaJS, JSX, and CSS. I chose to use the create-react-app boilerplate to minimize initial setup and invest more time in diving into weird technological rabbit holes. In the next iteration I plan on making this website mobile friendly and implementing some good UX methods to make it simple and attractive.

Package dependencies used

I used @stripe/react-stripe-js @stripe/stripe-js @testing-library/jest-dom @testing-library/react @testing-library/user-event axios firebase react react-datepicker react-dom react-icons react-image-file-resizer react-redux react-responsive-carousel react-router-dom react-scripts react-select react-star-ratings react-toastify redux redux-devtools-extension styled-components typewriter-effect web-vitals body-parser cloudinary cors dotenv express express-jwt firebase-admin jsonwebtoken mongoose morgan nodemon react-image-file-resizer slugify stripe uniqueid

ecommercestore's Issues

Not mobile Responsive in certain pages

pages like products description page are not responsive.

Improvement in UI, much need