Techmap is a responsive web application designed to empower Software Engineering students by bridging the gap between academic learning and industry demand. Through personalized learning-style assessments, curated resource recommendations, trend visualizations, and a simple resume-analysis tool, Techmap helps students optimize their skill development and increase their employability.
Go to Render & Watch This Demo Video
-
Google OAuth 2.0 Authentication Seamless user registration and login with Google Sign-In, plus profile creation and session management.
-
Learning Style Assessment Interactive quiz that captures each student’s preferred learning modality (Visual, Auditory, Kinesthetic, Reading/Writing) and stores results to tailor recommendations.
-
Personalized Resource Recommendations Dynamic filtering of tutorials, articles, and courses based on recorded learning styles and technical interests.
-
Industry Project Listings Pre-defined, GitHub-linked project ideas categorized by domain (FinTech, Healthcare, Gaming, Data Science) to inspire real-world practice.
-
Trends Dashboard Simple bar and pie charts displaying trending programming languages, frameworks, and job roles sourced from pre-curated JSON data.
-
Visual Board A board to Visualize and track your tech career goals.
-
Basic Resume Analysis Keyword-based parsing of pasted or uploaded CV text to suggest relevant projects or skills directly from the project database.
| Layer | Technologies |
|---|---|
| Backend | Node.js, Express.js, Passport Google-OAuth |
| Database | SQLite3 |
| Frontend | HTML5, Tailwind CSS, Vanilla JavaScript |
| Charting | Chart.js (via CDN) |
| Environment | dotenv, CORS, Express-Session, Body-Parser |
-
Clone the repository
git clone https://github.com/hd77alu/techmap.git cd techmap/Backend -
Install backend dependencies
npm install
-
Initialize and seed the database
npm run setup
Or run individually:
npm run init-db # Create tables npm run seed # Seed CSV data
-
Google OAuth Setup
A. Create OAuth Credentials:
- Go to Google Cloud Console
- Navigate to APIs & Services → Credentials
- Create OAuth 2.0 Client ID for web application
B. Configure Redirect URIs:
- URI:
http://localhost:3000/auth/google/callback
- Configure environment variables
Create a
.envfile inbackend/with:
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
SESSION_SECRET=your_session_secret- Start the server
npm start- Serve the frontend
Open your browser at
http://localhost:3000.
| Route | Method | Description |
|---|---|---|
/auth/google |
GET | Initiate Google OAuth flow |
/auth/google/callback |
GET | Google OAuth callback |
/auth/logout |
GET | End user session and logout |
/api/styles |
GET | Retrieve current user’s learning styles |
/api/styles |
POST | Submit a new learning style assessment |
/api/resources?style={style} |
GET | Fetch resources matching a style |
/api/projects |
GET | List all project ideas |
/api/trends |
GET | Get trending languages, frameworks, and roles |
/api/resume |
POST | Analyze resume text and suggest skills/projects |
See backend/models/init.sql for full details. Key tables:
- users: Stores Google ID, username, email, and last login date.
- learning_styles: Tracks each user’s style with timestamps.
- resources: Catalog of learning materials tagged by style and tech.
- projects: Pre-defined project ideas with GitHub links.
- trending_data: Static or pre-curated trend scores by category.
- resume_data: Stores raw resume text for keyword analysis.
| Name | Role | |
|---|---|---|
| Jesse Kisaale Walusansa | j.walusansa@alustudent.com | Backend Engineer |
| Andrew Ogayo | a.ogayo@alustudent.com | Backend Engineer |
| Mathew Ainomugisha | m.ainomugis@alustudent.com | Backend Engineer |
| Bakhit Mahamat | b.mahamat@alustudent.com | Backend Engineer |
| Hamed Alfatih | h.abdalgade@alustudent.com | Frontend Developer |
| Phillip Mulindwa | p.mulindwa@alustudent.com | Frontend Developer |
| Karabo Divine | k.divine@alustudent.com | Frontend Developer |
- Real-time job-board API integration (LinkedIn, Indeed).
- Advanced AI/ML résumé parsing with NLP.
- User-generated resource contribution and project creation.
- Collaborative features and forums.
- Native mobile applications for iOS/Android.
Crafted by The Blueprint Team.