Project Atelier is a desktop and mobile friendly app utilizing Node.js, React and Express that is a modern e-commerce portal that is not just functional, but also intuitive and user-friendly. ### Built With ![node.js](https://img.shields.io/badge/node-%23000000.svg?style=for-the-badge&logo=node.js) ![React](https://img.shields.io/badge/React-%23000000.svg?style=for-the-badge&logo=react&logoColor) ![Express](https://img.shields.io/badge/express-%23000000.svg?style=for-the-badge&express=next.js) ![Cloudinary](https://img.shields.io/badge/cloudinary-%23000000.svg?style=for-the-badge&logo=cloudinary) ![Jest](https://img.shields.io/badge/jest-%23000000.svg?style=for-the-badge&logo=jest)
## Getting StartedInstructions to setup Project Atelier on your local machine below.
### Prerequisites ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white) ```sh npm install npm@latest -g ``` ### Installation 1. Clone the repo ```sh git clone https://github.com/darray-queens/Project-Atelier.git ``` 2. Install NPM packages ```sh npm install ``` 3. Enter your port, API URL, and Github Token in `.env.local` file ```sh TOKEN = (your github token) PORT = (your local port) CLOUD_NAME = (your cloudinary database name) API_KEY = (your cloudinary token) API_SECRET = (your secret cloudinary token) ``` 4. Run in dev environment. ```sh npm run client-dev ``` 5. Run in server environment. ```sh npm run server-dev ``` ## Usage Project Atelier is run on the designated port. It can also be accessed utilizing localhost:PORT directly in the browser. ## Roadmap - [x] Deploy a product details section with photo gallery and style/sizing/quantity selection - [x] Develop a related products carousel and a module for customizing and curating a personal outfit list. - [x] Implement a rendering Q&A list with individual Q&A functionalities - [x] Dynamically render a ratings and reviews module with interactive sorting and filtering options - [x] Integrated media upload through cloud servies using Cloudinary to generate URLs from file uploads - [ ] Add catalog search bar at top of app ## Optimizations 1. Decreased cumulative layout shift by a factor of 10 by implementing conditionally styled Suspense elements 2. Modernized the user experience with responsive layouts allowing for mobile and desktop usage 3. Refined the ease of use for clients with the use of Cloudinary to upload directly with a file rather than a url ## Contributing Feel free to join in! Whether its fixing bugs, improving documentation, or simply spreading the word! ## Contact