An ecommerce store website with all the required functionality, built with React, Redux, Nodejs, JavaScript, and CSS.
Access my site at ani-cart
This project is currently in development. Users can use this website on their laptops and PCs but mobile supported layout is in development.
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
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.
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