Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/rosinskak/online_shop

React + TypeScript + FakeStore API + Tailwind + React Query + Redux ToolKit = Online_shop (fashion e-commerce shop)
https://github.com/rosinskak/online_shop

e-commerce e-commerce-website fakestore-api fashion-shop online-shop

Last synced: 5 days ago
JSON representation

React + TypeScript + FakeStore API + Tailwind + React Query + Redux ToolKit = Online_shop (fashion e-commerce shop)

Host: GitHub
URL: https://github.com/rosinskak/online_shop
Owner: RosinskaK
Created: 2024-03-18T14:09:40.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-11-11T14:16:00.000Z (about 2 months ago)
Last Synced: 2024-11-11T15:25:04.042Z (about 2 months ago)
Topics: e-commerce, e-commerce-website, fakestore-api, fashion-shop, online-shop
Language: TypeScript
Homepage: https://onlineshop2024.netlify.app/
Size: 24 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        #  Online_shop project

Project built in React💙

A responsive e-commerce application simulating an online fashion shop, where users can browse fashion items, add them to cart and favorites. Integrated with the  FakeStore API  to dynamically display product data.

➡️ Project Link: https://onlineshop2024.netlify.app/

Online_shop has a mobile version 📱 !!

## About the Project

- Built with React, React Router DOM, Vite,

- SessionStorage stores data during active browser session,

- TypeScript ensures type safety and improves code quality,

- React Query manages server state, caching and efficient data fetching,

- Redux Toolkit ensures effective state management,

- tested with unit tests using React Testing Library with Jest,

- styled with TailwindCSS project is fully responsive, utilizes RWD principles.

## Table of Contents

- [About the project](#about-the-project)

- [Usage](#usage)

- [Technologies and Tools Used](#technologies-and-tools-used)

- [Setup](#setup)

- [Acknowledgements](#acknowledgements)

- [License](#license)

- [Contact](#contact)

## Screenshots

 

  

  

  

  

  

  

  

  



## Usage

## Technologies Used

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)

![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)

**CSS Modules**

![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

![React Query](https://img.shields.io/badge/-React%20Query-FF4154?style=for-the-badge&logo=react%20query&logoColor=white)

![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white)

![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)

![Testing-Library](https://img.shields.io/badge/-TestingLibrary-%23E33332?style=for-the-badge&logo=testing-library&logoColor=white)

## Setup

This project uses npm as package manager

```bash

  npm install

```

To run locally

clone the project

```bash

  git clone https://github.com/RosinskaK/Online_shop.git

```

Go to the project directory

```bash

  cd Online_shop

```

Install dependencies

```bash

  npm install

```

Start the server

```bash

  npm run dev

```

## Acknowledgements

- [Fake Store API](https://fakestoreapi.com/docs)

- [React icons](https://react-icons.github.io/react-icons/)

- [Swiper](https://swiperjs.com/get-started)

- [React-toastify](https://fkhadra.github.io/react-toastify/introduction)

- [Canva](https://www.canva.com/)

- [Netlify](https://www.netlify.com/)

## License

[MIT](https://choosealicense.com/licenses/mit/)

## Contact

Created by Kasia Rosińska [@RosinskaK](https://www.linkedin.com/in/katarzyna-rosinska/) - feel free to contact me! 👋

Live link: https://onlineshop2024.netlify.app/