Skip to content

Latest commit

 

History

History
430 lines (368 loc) · 16.5 KB

README.md

File metadata and controls

430 lines (368 loc) · 16.5 KB

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.

License Website GitHub code size in bytes GitHub language count GitHub top language X (formerly Twitter) Follow Netlify Status

Table of Contents

⭐ 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