darray-queens / Project-Atelier

0 stars 2 forks source link


Project Atelier


Explore the docs »

Table of Contents
  1. About
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Optimizations
  6. Contributing
  7. Contact

About

Client Portal

project landing page image project landing page image project landing page image project landing page image


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)

(back to top)

## Getting Started

Instructions 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.

(back to top)

## 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

(back to top)

## 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

Andrew

Linkedin | GitHub

Amarin

Linkedin | GitHub

Malcolm

Linkedin | GitHub

Reagan

Linkedin | GitHub

(back to top)