Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/miladsadeghi/jerskits

Jerskits - A MERN Stack E-commerce Application with User Authentication, Favorites, Shopping Cart, Order Management, Checkout, and more!
https://github.com/miladsadeghi/jerskits

ecommerce framer-motion jest jwt mern react react-project redux redux-toolkit redux-toolkit-query shopping tailwindcss tdd testing typescript

Last synced: 2 months ago
JSON representation

Jerskits - A MERN Stack E-commerce Application with User Authentication, Favorites, Shopping Cart, Order Management, Checkout, and more!

Awesome Lists containing this project

README 

          



Jerskits



A comprehensive MERN app delivering seamless sports jersey shopping with authentication, personalized bag and favorites, secure checkout, and user profiles for an all-inclusive experience.





  DEMO







![License](https://img.shields.io/github/license/miladsadeghi/jerskits?style=for-the-badge)

[![Website](https://img.shields.io/website-up-down-green-red/http/jerskits.miladsdgh.ir.svg?style=for-the-badge)](https://jerskits.miladsdgh.ir)

![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/miladsadeghi/jerskits?style=for-the-badge)

![GitHub language count](https://img.shields.io/github/languages/count/miladsadeghi/jerskits?style=for-the-badge)

![GitHub top language](https://img.shields.io/github/languages/top/miladsadeghi/jerskits?style=for-the-badge)

[![X (formerly Twitter) Follow](https://img.shields.io/twitter/follow/milsdgh?style=social)](https://twitter.com/milSdgh?ref_src=twsrc%5Etfw)

[![Netlify Status](https://api.netlify.com/api/v1/badges/bd1a1b74-6f73-446e-af17-42f7bad866ba/deploy-status)](https://app.netlify.com/sites/eclectic-gnome-18731d/deploys)






## Table of Contents



- [Introduction](#-introduction)

- [Features](#-features)

- [Inspiration](#-inspiration)

- [Folder Structure](#-folder-structure)

  - [Client](#client)

  - [Server](#server)

- [Tech Stack](#-tech-stack)

- [Getting Started](#-getting-started)

  - [Environment Variables](#environment-variables)

  - [Development](#development)

  - [Production](#production)

  - [Running Tests](#running-tests)

- [How to Contribute](#-how-to-contribute)

- [License](#-license)

- [Contact](#-contact)



## ⭐ Introduction



Welcome to jerskits! This application is built using the MERN stack with a TDD approach. It aims to provide users with an intuitive and seamless shopping experience for football and basketball team jerseys. You can explore the variety of jerseys using advanced filters, read cloth descriptions, and choose the specific size you want. Add your selected jerseys to your bag or save them to your favorite list for future purchase. The checkout steps are secure and easy, ensuring you can trust the payment process. Don't forget, once your orders arrive, submit a review for the received products!



**Please note:** Jerskits is a portfolio project and is not intended for actual commercial use; it simulates an e-commerce environment purely for demonstration and educational purposes.



## 💡 Inspiration



I'm always eager to learn something, and I always try to improve my skills. I connect my learning with my projects. I like challenges and enjoy solving any problem or, at least, trying. If I want to learn something, I will build a project with that specific thing. that specific thing can be a tool, package, etc.



For example, my goal with building Jerskits is to learn how to write tests with a TDD approach (my previous projects were made with the same purpose). Jerskits is my first application where I've implemented tests. However, it's not fully covered yet; as of 1/12, it's around 40-45%. I plan to improve it with additional features. My focus in Jerskits is on the front-end side. While I'm primarily a front-end developer, I also do some back-end coding, but it's not as efficient as that of a dedicated backend developer. I do it for my personal projects, so I don't really care if there are any problems or not :).



Another one of my goals is to work more with React, TypeScript, and any packages that can be used to enhance the development experience. For instance, I use a lot of packages, but I've realized that some of them are too heavy. This has led me to remove them and create my own solutions. It's been a valuable lesson for me. Some packages might make your life easier, but it's not always worth it.



I've also encountered challenges with animations. While Framer Motion is a good package for animation, it's hard to get used to. Just for the landing page header, it took me a month to implement.



The last lesson I've learned is about using Redux, Redux Toolkit, and Redux Toolkit Query. In my opinion, all of them are useless; they just make the project size bigger. Instead of Redux, I could use Zustand or Jotai, and for handling fetch requests, I could use React-Query (Tan Stack version). However, I'm in the middle of development, so I can't make these changes now.



There must be a lot of lessons, but due to ADHD, I don't remember anything else :)



## ✨ Features



- **User Authentication**: Jerskits employs secure JWT-based authentication, enabling users to create accounts, log in, and access their personalized profiles with ease. Access tokens and refresh tokens are utilized for authorization, ensuring seamless and secure user interactions.


- **Product Catalog**: Jerskits offers a curated selection of sporting apparel for men, women, and kids, featuring everything from jerseys and shorts to team merchandise. Explore the latest trends and player designs, easily filtered by brand, size, color, price and more. Our intuitive filters help you find your perfect gear in seconds, putting the power of personalization in your hands..


- **Product Details**: View detailed information about each product, including images and descriptions.


- **Shopping Bag**: Easily add desired items to your shopping bag, conveniently manage quantities and sizes, and proceed to checkout with a streamlined process. A dedicated modal allows you to review your cart, make adjustments, and finalize your purchase.


- **Checkout Experience**: Embark on a seamless checkout journey with Jerskits. Step through four distinct stages: Account Information, Delivery Details, Billing Information, and Payment. Each step undergoes rigorous client-side and server-side validation, ensuring a secure and reliable payment experience.


- **Orders History**: Maintain complete control of your purchases with Jerskits' comprehensive order history. View your order details, track the status of your ongoing orders, and submit reviews for items you've already received.


- **Code that shines**: Jerskits is built with TDD principles, employing Jest and Vitest to meticulously test each component, resulting in robust and reliable code.

- **Responsive Design**: Enjoy a consistent and visually appealing experience across various devices.


- **User Experience**: You might notice initial load on opening new pages. This is intended for caching the page data for fast loads in the future.


- **Performance**: Better performance and accessibility.



## 📂 Folder Structure



Here's an overview of the project's folder structure:



  Server

  ```

  Server

  ├───images                # User avatars will upload here

  └───src

      ├───api

      │   ├───controller

      │   ├───errors        # API errors

      │   ├───middleware

      │   ├───models        # Database models

      |   └───routes

      ├───config            # App and router configurations

      ├───log               # Logs will be stored here

      └───utils             # Validation and functions

  ```



  Client

  ```

  Client

  ├───public

  │   ├───fonts

  │   └───images                            # Static svgs, images, etc.

  └───src

      ├───App                               # Redux store setup

      │   └───feature                       # Redux slices

      │       ├───auth

      │       └───profile

      ├───components                        # Reusable components

      │   ├───Accordion

      │   ├───Avatar

      │   ├───Button

      │   ├───Checkout

      │   ├───Dropdown

      │   ├───FilterBar

      │   │   └───components

      │   ├───Footer

      │   ├───Form

      │   ├───FullScreenLoader

      │   ├───Input

      │   ├───Navbar

      │   ├───Order

      │   ├───Popups

      │   ├───Products

      │   ├───ProfileLink

      │   └───Review

      ├───hooks                               # Custom hooks

      ├───icons                               # Custom icons

      ├───layouts

      │   ├───AuthLayout

      │   └───ProfileLayout

      ├───modals

      ├───pages

      │   ├───Checkout

      │   ├───Landing

      │   │   └───components

      │   │       ├───Header

      │   │       └───KidCollection

      │   ├───Product

      │   │   └───components

      │   ├───Profile

      │   │   ├───Edit

      │   │   └───Favorites

      │   ├───SignIn

      │   └───SignUp

      ├───services                            # API routes

      ├───shared

      │   └───types

      ├───test                                # Test setup

      │   └───mocks                           # API routes mock

      └───utils                               # Util functions

  ```



## 💻 Tech Stack



### Client



> ⚠️ I have used many packages, but due to their large sizes, I need to remove them and create my own solutions. The removed packages include react-select, swipperjs, hook packages, twin macro, styled components, and others.



  

    Tech

    What for

  

  

    typescript

    Make coding fun again.

  

  

    react

    Build a component based user interface.

  

  

    tailwindCSS

    Fast & powerful way to build a beautiful UI.

  

  

  

    clsx

    Creating conditional className strings

  

  

    tailwind-merge

    Merge tailwindCSS classes without style conflicts.

  

  

    framer-motion

    Build animations with ease.

  

  

    react-hot-toast

    Show notifications.

  

  

    react-loading-skeleton

    Make beautiful, animated loading skeletons.

  

  

    react-range

    Range input with a slider.

  

  

    @reduxjs/toolkit

    Simplifies the Redux development process, also using rtk query for handle apis.

  

  

    react-redux

    State container

  

  

    react-router-dom

    Implement dynamic routing.

  

  

    spinners-react

    Loading spinners

  

  

    yup

    Build form schema for validation

  

  

    msw

    Mock api routes for tests

  

  

    vitest

    Testing fast much as possible

  



### Server



  

    Tech

    What for

  



  

    Node JS

    Create server-side

  

  

    Express JS

    Create RESTful API

  

  

    express-validation



    Handle routes errors

  

  

    express-validator



    Create validator for routes body

  

  

    helmet.js

    Handle routes security

  

  

    jsonwebtoken

    Use JWT in Node JS

  

  

    mongoose

    Use MongoDB

  

  

    morgan

    HTTP request logger

  

  

    multer

    Upload files

  

  

    winston

    Log requests

  

  

    bcrypt

    Hash passwords

  

  

    country-state-city

    Handle location

  

  



## 🚀 Getting Started



To run this project, you will need to add the following environment variables to your .env's file.



### Environment Variables



### Server



  

    

      Variable

      Value example

      Description

    

    

      NODE_ENV

      development | production

      represents application's environment

    

    

      PORT

      3000

      express will run on that PORT

    

    

      MONGO_URI

      mongodb+srv://[username:password@]host[/[defaultauthdb]

      MongoDB connection string. its worked with local and cloud (atlas)

    

    

      DB_NAME

      jerskits

      MongoDB database name

    

    

      ACCESS_TOKEN_SECRET

      94f46a54b693641f562ce82db...

      You can use any random string or generate a new one

      (article)

    

    

      REFRESH_TOKEN_SECRET

      ebaebd23444d3a50f8eafa2ad...

      You can use any random string or generate a new one

      (article)

    

    

      SERVER_URL

      http://localhost:3001

      URL of the server. its could be different in dev or pred

    

  



### Client



  

    

      Variable

      Value example

      Description

    

    

      VITE_NODE_ENV

      development

      Represents application's environment

    

    

      VITE_SERVER_URL

      http://localhost:3001/api

      URL of the server. its could be different in dev or pred. but /api should be added ended of it (except if server deploy port is 80 or 443)

    

  



## Development



after add environment variables, you should install dependencies then run server and client.



```bash

cd server

npm install <----> yarn

npm run dev <----> yarn dev



cd ../client

npm install <----> yarn

npm run dev <----> yarn dev

```



## Production



if you want to deploy server and client to production, you need do similar steps as above.



```bash

cd server

npm install <----> yarn

npm run start <----> yarn start



cd ../client

npm install <----> yarn

npm run preview <----> yarn preview

```



## Running Tests



to run normal test



```bash

npm run test <---> yarn test

```



to run coverage test:



```bash

npm run test:coverage <---> yarn test:coverage

```



to run ui test:



```bash

npm run test:ui <---> yarn test:ui

```



## 👏 How to Contribute



Contributions are welcome as always, before submitting a new PR please make sure to open a new issue so community members can discuss.



Additionally you might find existing open issues which can helps with improvements.



## 📝 License



This project is licensed under the [MIT License](/LICENSE) . Feel free to use, modify, and distribute the code as per the terms of the license.



## 🤝 Contact



- [Telegram](https://t.me/wsxxsw)

- [Twitter](https://twitter.com/milSdgh)

- [Email](mailto:miladsadeghi2323@gmail.com)

- [Discord](https://discord.com/users/490580342785179678)