About the Project

projectLab is a web-based project management application that anyone can use for personal project portfolio management. Although with my research background, it was built with graduate students and research professionals in mind, it is versatile enough to be used by anyone wanting to build further structure around their research, and personal or professional projects (theses/goals). It is also, more broadly, a project management tool that can be used to summarize any sub-projects they do at work to build a living portfolio and make interview preparation easier.

(back to top)

Built With

• 
• MySQL
• Express
• Client libraries:
  • react
  • react-router
  • axios

• Server libraries:
  • knex
  • express
  • Google's Gemini API

(back to top)

Getting Started

To get a local copy up and running follow these steps.

Prerequisites

In order to launch the application, start my installing the necessary npm packages in both client & server folders.

• npm

  npm install

Getting Started

1. In the server & client folders, create a local .env file by referring to the .env.example file in that folder
2. On the client side, ensure that the .env file contains the same port number as in your server PORT .env variable to access the backend (in other words, that they match)
3. Spin up a local MySQL instance and create a local db to host the data for this application
4. Run the migrations with the 'knex migrate:latest' command to build the tables

   npm run migrate 

5. Seed the tables with the sample data by running 'knex seed:run'

   npm run seed

6. To launch the application, launch the backend first, by running 'npm start' or an equivalent start command.

   npm start

7. Launch the front end with the command 'npm run dev' (ensure the front end local host address is reflected in your backend .env file)

   npm run dev 

(back to top)

Usage

This is a mobile-first application, designed to be used on the go. However, it does have some responsive elements for tablet and desktop view.

• The application home page is the 'My Projects' dashboard with an overview of your projects and a dashboard
• To add a project, click into the '+' icon in the footer navigation bar
• To navigate back to this Home page, you can click onto the home icon
• To access the built-in Google's Gemini AI, click on the network tree icon in the bottom right corner on the Project dashboard page or Project Details pages. Use this feature to help summarize any project points, ask questions about your project or practice for interviews as you're reviewing on the fly.
• To access a project, click on the three-vertical-dots icon in any of the project banners to enter into the Project Details page for that project from the Project Portfolio overview dashboard
• On the Project Details page, you can edit the dashboard by clicking on the pencil icon in the footer navigation bar
• On the edit page, click the back arrow button to navigate back to the Details page without saving
• You can also similarly access Home & the AI Prompter through the navigation bar on the Project Details page
• To delete the project, click the red trash icon in the top right corner of the Project Details page
• Adding/deleting to-do list items can be done within the page & the total count will be updated live

(back to top)

Contact

Yvette de Sereville: linkedin.com/in/yvette-de-sereville

(back to top)

Acknowledgments

• https://www.freecodecamp.org/news/build-a-todo-app-from-scratch-with-reactjs/
• https://medium.com/@worachote/building-a-todo-list-app-with-reactjs-a-step-by-step-guide-2c58b9b6c0f5
• https://ai.google.dev/gemini-api/docs/get-started/tutorial?lang=node

(back to top)