MiladSadeghi / Jerskits

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

Jerskits.mov

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

Table of Contents

• Introduction
• Features
• Inspiration
• Folder Structure
  • Client
  • Server
• Tech Stack
• Getting Started
  • Environment Variables
  • Development
  • Production
  • Running Tests
• How to Contribute
• License
• 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.

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.

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

npm run test <---> yarn test

to run coverage test:

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

to run ui test:

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 . Feel free to use, modify, and distribute the code as per the terms of the license.

🤝 Contact

• Telegram
• Twitter
• Email
• Discord