Bleuprint

Link to LIVE site (Only for Desktop Mode)

Overview

This application was designed to provide digital artists in the game, film, and vfx industry with the means to take control of their financial journey by discovering alternative revenue streams beyond the traditional studio dependency.

Within the 3 weeks of creation, the goal was to incorporate CRUD functionality in an exciting way while staying relevant to the consumer market. In addition, gaining more experience and deeper understanding of React, API's, databases, and UI/UX were also of top priority.

Features

• Users can browse and filter other users products on the marketplace.
• Users can create/edit/update/delete/view their own products.
• Users can view info details for each public product.
• Users can add products to their own cart for purchase.
• Cart feature calculates total costs of products currently in Cart.
• Users can delete products in Cart.
• Users can view their purchased products in their own library.
• Users acquire every customer order of their product.
• Users can refund customer orders.
• Users can receive income and monitor their cashflow within their Financial Analytics feature.

Install Bleuprint For Yourself

1. Set up a Firebase project.

2. Clone Bleuprint to your local machine.

    git@github.com:JFelz/CAPSTONE---Bleuprint.git
   

3. Move into your directory

    cd CAPSTONE---Bleuprint
   

4. When VSCode has opened the application, create a .env file at the root of the project and paste the following keys into the .env file:

    NEXT_PUBLIC_FIREBASE_API_KEY=""
    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
    NEXT_PUBLIC_FIREBASE_DATABASE_URL=""
    NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=""
    NEXT_PUBLIC_FIREBASE_APP_ID=""
   

5. Insert your firebase config values to the corresponding keys in the previous step.

6. You will have to create four database folders in Firebase to hold different user requests.

   • Cart
   • Library
   • Seller Expenses
   • Main Marketplace

7. In the root directory of the CLI, run

    npm install or npm i
   

8. After the install, in the CLI, run

    npm run prepare
   

9. To start Bleuprint, run

    npm run dev
   

10. Click http://localhost:3000 in the terminal to open the DOM.

11. Enjoy freedom through Bleuprint!

Planning for Bleuprint

ERD

Wireframe/Prototype

Figma Wireframe Link

Project Board

Bleuprint Project Board

Walkthrough Video

Walkthrough Video Link

Created by Jovanni Feliz

View LinkedIn Page

View Instagram Page

Screenshots of Bleuprint

Sign-In Page

Bleuprint public marketplace.

View Product Details / Cart feature with multiple orders and total cost.

Purchase Confirmation Page / My Library

Financial Analytics / My Store feature (MVP)

Tech Stack