Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/satnaing/haru-fashion

An e-commerce web application developed with Next.JS (React) + Tailwind CSS for front-end/UI, Context API for state management and Custom REST API for Backend.
https://github.com/satnaing/haru-fashion

context-api firebase fullstack-development nextjs pwa react tailwind tailwindcss typescript

Last synced: about 2 months ago
JSON representation

An e-commerce web application developed with Next.JS (React) + Tailwind CSS for front-end/UI, Context API for state management and Custom REST API for Backend.

Awesome Lists containing this project

README

        

# Haru-Fashion E-commerce Web Application

![Haru-Fashion Responsive Design (2)](https://user-images.githubusercontent.com/53733092/139094836-3c75c8fa-4f7a-43a7-b8c8-7cf45af53b71.png)
![ts](https://badgen.net/badge/Built%20With/TypeScript/blue) ![vercel](https://img.shields.io/github/deployments/satnaing/e-commerce/production?label=vercel&logo=vercel&logoColor=white) [![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

An e-commerce web application developed with Next.JS and TypeScript. Tailwind CSS is used for styling and React's Context API is used for state management. Custom REST API is used as a backend ([Haru API](https://github.com/satnaing/haru-api)).

## Demo


Haru-Fashion Demo



## Lighthouse Score


Lighthouse

## Features

- Progressive Web App (PWA) 🔥
- Full-text Search 🔎
- Responsive Design 📱💻
- Wishlist 🤍
- Add To Cart 🛒
- Different Category Page 🧑🏻👩🏻🎒
- Authentication (Register/Login/Logout) 🛡️
- Pagination ⬅️➡️
- Animation ✨
- i18n (English & Burmese) 🌐
- Keyboard Accessible ⌨️

## Tech Stack

**Frontend** - NextJS, React, TypeScript
**Styling** - Tailwind CSS
**Design & Prototype** - Figma
**State Management** - ContextAPI
**Backend** - [Haru API](https://github.com/satnaing/haru-api) (Previous Version - Firebase)
**Containerization:** Docker
**Deployment** Vercel

## Running Locally

Clone the project

```bash
git clone https://github.com/satnaing/e-commerce.git
```

Go to the project directory

```bash
cd e-commerce
```

Remove remote origin

```bash
git remote remove origin
```

Install dependencies

```bash
npm install
```

Start the server

```bash
npm run dev
```

## Inspiration and Credits

Even though I wrote every single line of code for this web app, images and some design are inspired and used from the following websites.

- [Goya WordPress Premium Theme](https://goya.everthemes.com/demo-fashion/)
- [Lusion WordPress Premium Theme](https://hn.arrowpress.net/lusion/home-minimalist/?currency=USD)

## Author

- [@satnaing](https://github.com/satnaing)