RoadToDev - Roadmap Generator

RoadToDev is a web-based application developed as part of our "Software Development" course, where we were tasked with creating a real-life application using artificial intelligence. The platform helps developers generate personalized learning roadmaps based on their skills and interests. By analyzing user input from the form, the OpenAI API generates a roadmap outlining the areas the user should focus on, providing an interactive and dynamic experience. This project showcases a full-stack implementation using modern technologies and best practices.

---

Team RoadToDev

Name	GitHub	LinkedIn	Email
Fernanda Neves (fmn)	fiefaneves	LinkedIn	fernanda.marnev@gmail.com
Giovanna Mafra (gmm8)	GiovannaMafra	LinkedIn	gmm8@cin.ufpe.br
Heitor Barros (hfmb)	H3ITHOR	LinkedIn	eito@gmail.com
Josias Netto (jhcn)	JosiasNetto	LinkedIn	jhcndev@gmail.com
Julia Zovka (jzs)	julia-zovka	LinkedIn	jzs@cin.ufpe.br

---

Table of Contents

1. Features
2. Live Demo
3. Technologies Used
4. Getting Started
   • Prerequisites
   • Installation
5. Test locally
6. Project Structure
7. Contributing
8. License

---

Features

• User authentication with JWT, including login, registration, and password reset.
• AI-powered roadmap generation tailored to user preferences.
• Interactive form to evaluate developer skills.
• Progress tracking with visual indicators and percentage completion.
• Ability to mark topics as completed.
• Recommendations Based on Market Trends
• Interactive learning with recommended resources for each topic.
• Responsive and modern UI/UX.

---

Live Demo: RoadToDev

Login Page

User Page

Forms Page

RoadMap Page

---

Technologies Used

Front-End

• Next.js (React Framework)
• TypeScript
• TailwindCSS
• Shadcn/UI

Back-End

• Node.js
• Express
• dotenv
• cors
• mongoDB
• mongoose
• bcrypt
• jsonwebtoken
• nodemailer

AI/External APIs

• OpenAI API - chatgpt-3.5-turbo (for recommendations and roadmap generation)

---

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js
• npm

Installation

1. Clone the repository:

   git clone https://github.com/fiefaneves/RoadToDev.git
   cd RoadToDev
   git checkout locally-test
   
   

2. Install dependencies for the front-end:

   cd front-end/my-app
   npm install next react react-dom
   npm install --save-dev typescript @types/react @types/node
   

3. Install dependencies for the back-end:

   cd ../../back-end
   npm install cors openai dotenv express mongodb mongoose bcrypt jsonwebtoken
   

4. Set up environment variables:

   • Create .env file in the back-end directory.
   • Instruction to the Professor: Copy and paste the content of the "ENV-PROJECT" file anexed in the classroom or in the drive of the team.
   • Example variables for the back-end:

   OPENAI_API_KEY=your_openai_api_key
   MONGO_DB_KEY=your_mongo_db_key
   JWT_SECRET=meu_segredo_super_secreto
   EMAIL_USER='APPLICATION_EMAIL'
   EMAIL_PASS='EMAIL_PASSWORD'
   

Test locally

1. Start the back-end server:

   cd back-end
   npm run dev
   

2. Start the front-end development server:

• open a new terminal

  cd front-end/my-app
  npm run dev
  

3. Open the app in your browser: http://localhost:3000

Project Structure

Front-End

frontend/
│── .next/                              #next modules
│── node_modules/                       #nodejs modules
│── public/                 
└── src/                    
    │── app/
    │  │── api/
    │  │  └── generate.js
    │  │── create_account/
    │  │   └── page.tsx                
    │  │── esqueci-senha/
    │  │   └── page.tsx               
    │  │── forms/
    │  │   └── page.tsx               
    │  │── intermediateScreen/
    │  │    └── page.tsx                #user screen
    │  │── mudar-senha/
    │  │   └──page.tsx                  #login screen
    │  │── roadMap/
    │  │   └──page.tsx                  #generated roadmap screen
    │  │── test/
    │  │   └── button.test.tsx
    │  │   └── links.test.tsx
    │  │   └── sidebar.test.tsx
    │  │── layout.tsx                   #layout configuration
    │  │── page.tsx                     #home page info
    │  └── RoadMapContext.tsx 
    │── Components/
    │   │── ui/                         #components from shadcn ui
    │   └── sidebar.tsx
    │── hooks/                          #reusable functions
    │── lib/
    │   └── utils.ts
    └── styles/
        └─ globals.css                 #global css

Back-End

backend/
│──data/                                #json with resources
│── node_modules/                       #nodejs modules
│── src/                    
│     │── config/
│     │   │── dbConnection.js           #Mongodb configuration
│     │   └── open-ai.js                #open ai configuration 
│     │── controllers/
│     │   │── generative.js             #generate function
│     │   │── linksController.js        #functions to links 
│     │   └── usersController.js        #functions to login, passwords and roadmaps
│     │
│     │── middleware/
│     │   └── authMiddleware.js         #intermediate functions
│     │── models/
│     │   │── roadMapModel.js           #RoadMap schema
│     │   └── usersModel.js             #Users schema
│     └── routes/
│         └── usersRoutes.js            #creates the routes
│── .env
│── package-lock                
│── package                     
└── server.js                           #creates a server at a port

Contributing

Contributions are welcome!

1. Fork the repository.
2. Create a feature branch

   git checkout -b feature/new-feature
   

3. Commit your changes:

   git commit -m "Add new feature"
   

4. Push to the branch:

   git push origin feature/new-feature
   

5. Submit your pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.