ElevatePath

Inspiration

Many students struggle to understand how their academic choices connect to their career goals. We noticed this firsthand while helping classmates at Miami Dade College and FIU, most students select classes reactively, not strategically. We wanted to build something that could turn confusion into clarity, giving students a guided, visual pathway toward their future.

🎯 What It Does

What it does

• ElevatePath helps students map out their academic and career journey through personalized, AI-powered pathways. It provides:

• Smart recommendations for courses, skills, and career goals

• A clean, responsive interface for visualizing academic progress

• Local data storage so users can revisit and modify their pathways anytime

• Backend support for AI calls and data management using FastAPI

• By merging intuitive design with AI-driven insights, ElevatePath empowers students to make informed, confident decisions about their education.

How we built it

• The app combines a modern React + FastAPI architecture:

• Frontend: React + Vite for a fast, modular user experience

• Styling: Tailwind CSS with custom shadcn/ui-inspired components

• Backend: FastAPI for handling requests, data persistence, and Gemini API communication

• AI Integration: Gemini API provides adaptive academic and career suggestions through FastAPI endpoints

• Storage: Local persistence for pathways, with scalable backend support for future database use

• Deployment: Deployed Front-End using Vercel, and Back-end with render.com

• This setup created a seamless communication loop between the frontend and backend, enabling responsive AI-assisted guidance for students.

Challenges we ran into

• FastAPI integration: Setting up proper CORS policies and request handling between React (Vite) and FastAPI

• Tailwind v4 changes: Adjusting PostCSS configuration to work with the new plugin system

• Authentication replacement: Removing Base44 and building a local state-based user system

• Import resolution issues: Fixing path aliases and component modularization

• Performance tuning: Balancing animations, styling, and build size while maintaining fast load times

Accomplishments that we're proud of

• Successfully integrated a React frontend with a FastAPI backend for dynamic, AI-powered features

• Built a fully responsive UI using Tailwind and modular components

• Achieved smooth AI recommendation flow via Gemini and FastAPI

• Overcame major dependency and configuration issues to deliver a stable, working prototype

What we learned

• How to connect FastAPI and React for efficient client–server communication

• Deeper understanding of RESTful API design and data flow

• The importance of frontend modularity for scaling projects

• How to implement AI models into real applications using practical endpoints

• That clarity in design is just as important as technical capability

What's next for ElevatePath

• Integrate with real college APIs to provide accurate program and course mappings

• Add database support through FastAPI for persistent user data

• Implement progress tracking and advisor collaboration features

• Expand AI models for personalized, goal-driven academic pathways

Built With

• css
• fastapi
• gemini-ai-api
• html
• javascript
• python
• react
• render
• tailwind
• vercel