Jerskits.mov
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.
- Introduction
- Features
- Inspiration
- Folder Structure
- Tech Stack
- Getting Started
- How to Contribute
- License
- Contact
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.
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 :)
- 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.
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 ```
⚠️ 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 |
| 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 |
To run this project, you will need to add the following environment variables to your .env's file.
| 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 |
| 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) |
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 devif 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 previewto run normal test
npm run test <---> yarn testto run coverage test:
npm run test:coverage <---> yarn test:coverageto run ui test:
npm run test:ui <---> yarn test:uiContributions 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.
This project is licensed under the MIT License . Feel free to use, modify, and distribute the code as per the terms of the license.