Project Listing Application

• An application where you can add, view, edit, and delete a list of projects

---

The frontend was deployed to Vercel (hosting service)

LIVE WEBSITE LINK: https://project-list-chi.vercel.app/

• Note that auth0 will prompt immediately once you enter the website
• Note that I tried to deploy the frontend with docker but there's an error connecting the nextjs to the backend (probably some issue with the container)

The backend was deployed to Render (hosting service) with dockerhub

• Dockerhub - https://hub.docker.com/r/rjbarcon/project-list-backend
• API Endpoint (Secured) - https://project-list-backend-u45p.onrender.com/api/projects

Preview (Screenshots)

Light Mode

Dark Mode

Query by name

Query by id

Responsiveness/Media Query

Tablet	Mobile

Live Backend Implementation

Auth0 (frontend)

PostgreSQL (NeonDB)

Overview

The Project List application is a full-stack web application designed to help you manage your projects. It allows you to:

Deployed:

• View: See a list of all projects.
• Filter by id: You can filter by id via search bar
• Filter by name: You can filter by name via search bar
• Light & Dark mode: You can toggle light/dark mode

Backlogs:

• Create: Add new projects with details like name, description, and status.
• Edit: Modify existing project details.
• Delete: Remove projects you no longer need.

Technologies Used

• Frontend: Nextjs v15 (Used client components only)
• Backend: Node.js with Express.js
• Database: PostgreSQL v17 (Used neon on deployment)
• Other: Auth0 (for authentication)

Installation Instructions

This document outlines the installation process for both the frontend and backend components of the Project List application.

Backend Installation (Node.js/Express)

1. Prerequisites:

   • Node.js: Ensure you have Node.js (version 22.x or later recommended) installed on your system. You can download it from https://nodejs.org/.
   • Database: You'll need to set up a PostgreSQL database in your local machine
   • Git: You need to have git installed on your machine.

2. Clone the repository:

   • Open your terminal or command prompt.
   • Use git to clone the project repository to your local machine. Replace <repository_url> with the actual URL of your project's Git repository.
   • Navigate into the backend directory.

   git clone <repository_url>
   cd project-list/backend

3. Install dependencies:

   • Ensure you are in the project-list/backend directory.
   • Use npm to install the project's required packages.

   npm install

4. Environment Variables:

   • Replace the .env file in the project-list/backend directory.
   • Add the following environment variables to the .env file, replacing the placeholders with your actual values:

   AUTH0_AUDIENCE=<CONTACT_RONNIE_FOR_THE_KEYS>
   AUTH0_ISSUER_BASE_URL=<CONTACT_RONNIE_FOR_THE_KEYS>
   PORT=3500
   POSTGRESQL_CONNECTION_STRING=<CONTACT_RONNIE_FOR_THE_KEYS>
   PORT=3500
   

5. Start the Backend Server:

   • Run the following command to start the backend server:

   npm run start

   • This will typically start the server on http://localhost:3500 (or the port you specified in the .env file).

NOTES:

• I deployed the backend to Sliplane (hosting service) via dockerhub (https://hub.docker.com/repository/docker/rjbarcon/project-list-backend/general)

Frontend Installation

1. Navigate to the Frontend Directory:

   cd project-list/frontend

2. Install Dependencies:

   npm install

3. Environment Variables:

   • Add the following environment variables to the .env file, replacing the placeholders with your actual values:

     AUTH0_AUDIENCE=<GET_KEY_FROM_RONNIE>
     AUTH0_BASE_URL=<GET_KEY_FROM_RONNIE>
     AUTH0_CLIENT_ID=<GET_KEY_FROM_RONNIE>
     AUTH0_CLIENT_SECRET=<GET_KEY_FROM_RONNIE>
     AUTH0_ISSUER_BASE_URL=<GET_KEY_FROM_RONNIE>
     AUTH0_PROJECT_SCOPE=<GET_KEY_FROM_RONNIE>
     AUTH0_SECRET=<GET_KEY_FROM_RONNIE>
     NEXT_PUBLIC_API_ENDPOINT=<GET_KEY_FROM_RONNIE>
   

4. Start the Frontend Server:

   npm start

   • This will start the server on http://localhost:3000.

License

This is free to use and you can explore how I integrate both the frontend and the backend.