Project Atelier

Explore the docs »

Table of Contents

1. About
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Optimizations
6. Contributing
7. Contact

About

Client Portal

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

(back to top)

Getting Started

Instructions to setup Project Atelier on your local machine below.

Prerequisites

npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/darray-queens/Project-Atelier.git

2. Install NPM packages

   npm install

3. Enter your port, API URL, and Github Token in .env.local file

    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.

   npm run client-dev

5. Run in server environment.

   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

• Deploy a product details section with photo gallery and style/sizing/quantity selection
• Develop a related products carousel and a module for customizing and curating a personal outfit list.
• Implement a rendering Q&A list with individual Q&A functionalities
• Dynamically render a ratings and reviews module with interactive sorting and filtering options
• 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)