Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maybemahdi/shopease-client
Easily Browse Your Favourite Digital Products
https://github.com/maybemahdi/shopease-client
expressjs mongodb nodejs reactjs tailwindcss
Last synced: 16 days ago
JSON representation
Easily Browse Your Favourite Digital Products
- Host: GitHub
- URL: https://github.com/maybemahdi/shopease-client
- Owner: maybemahdi
- Created: 2024-08-14T14:17:45.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-16T05:17:32.000Z (6 months ago)
- Last Synced: 2024-11-19T16:57:37.904Z (3 months ago)
- Topics: expressjs, mongodb, nodejs, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://shopease-37409.web.app
- Size: 256 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ShopEase - Client
## Project Overview
### ShopEase is a full-stack single-page web application designed to provide a seamless product browsing experience. This project focuses on implementing core functionalities such as pagination, searching, categorization, and sorting of products. The aim is to create an intuitive user interface where users can efficiently search for products, filter them by various criteria, and sort them based on their preferences.
### Live Site URL:
* Firebase : https://shopease-37409.web.app
## How to Run Locally
```js
1. Clone the Repo: "https://github.com/maybemahdi/ShopEase-Client"
2. Install all Dependencies: "npm i"
3. Replace Env File
4. Start the Server: "npm run dev" or "yarn dev"
```
## Technologies Used
- React.JS
- TailwindCSS
- Node.JS
- Express.JS
- MongoDB
## Features and Characteristics:
1. Pagination
Implemented server-side pagination to load products efficiently.
The front end displays page numbers with navigation buttons (Next, Previous) for seamless browsing.
2. Searching
Developed a search feature that allows users to find products by their names.
3. Categorization
Products are categorized into different categories, including Brand Name, Category Name, and Price Range.
Users can apply single or multiple filters simultaneously to refine their product search.
4. Sorting
Added sorting functionality to allow users to sort products by:
Price: Low to High, High to Low
Date Added: Newest First
5. Authentication
Integrated Google Authentication using Firebase.
Implemented Email and Password Authentication using Firebase for secure access.
6. UI Instructions
The website is fully responsive, following a mobile-first design approach.
Fixed-size product cards are used to display concise product information.
A Navbar includes the website name/logo and relevant routes for easy navigation.
A Footer contains necessary information and links.
7. Additional Notes
The code is clean, well-commented, and follows best practices.
The project includes at least 10 meaningful commits on both frontend and backend repositories.
A README file is provided in both the frontend and backend repositories, detailing project setup, instructions, and other necessary information for local deployment.