🚀 Lakshya - AI-Powered Learning Roadmap Platform

Create personalized, AI-powered learning roadmaps to master any skill or technology

View Demo · Report Bug · Request Feature

📋 Table of Contents

About the Project
Key Features
Tech Stack
Getting Started
Usage
Project Structure
API Documentation
Development
Deployment
Contributing
License
Acknowledgments

🎯 About the Project

Lakshya (meaning "Goal" or "Target" in Hindi) is an innovative AI-powered platform that helps developers and learners create personalized learning roadmaps. Whether you're aiming to master a new technology, prepare for a specific company interview, or advance your career, Lakshya generates comprehensive, structured learning paths tailored to your goals.

Why Lakshya?

🤖 AI-Powered Generation: Leverage Google's Gemini 2.0 Flash model to create intelligent, contextual roadmaps
🎨 GitHub-Inspired UI: Familiar, clean interface that developers love
📊 Progress Tracking: Monitor your learning journey with interactive completion tracking
💾 Persistent Storage: Save and revisit your roadmaps anytime with MongoDB integration
🔄 Version Control: Track different versions of your roadmaps as you refine them
📱 Responsive Design: Seamless experience across desktop, tablet, and mobile devices
🌙 Dark Mode: Easy on the eyes with a beautiful dark theme
📄 PDF Export: Download your roadmaps as professional PDF documents

✨ Key Features

🧠 AI Chatbot Interface

Interactive conversation-based roadmap generation
Context-aware responses using Gemini 2.0 Flash
Ability to refine and iterate on generated roadmaps
Natural language understanding for goals and requirements

🗺️ Structured Roadmaps

Organized into phases with clear timelines (Day 1-7, Week 1-2, etc.)
Topic-based sections with detailed descriptions
Curated resources and learning materials for each section
Focus areas highlighting key concepts

📈 Progress Management

Mark sections as completed
Visual progress indicators
Contribution-style activity graph
Activity feed showing your learning milestones

👥 User Profiles

GitHub OAuth authentication
Personalized dashboard with your roadmaps
Profile customization with bio and location
Social features (followers, following)

🎨 Rich Markdown Support

Full GitHub Flavored Markdown rendering
Emoji support
Code syntax highlighting
Tables, lists, and formatting

📚 Repository-Style Organization

Browse your roadmaps like GitHub repositories
Search and filter capabilities
Sort by last updated, popularity, etc.
Star and fork functionality concept

🛠️ Tech Stack

Frontend

Next.js 15.1.4 - React framework with App Router
React 19 - UI library
TypeScript 5 - Type safety
Tailwind CSS 3.4 - Utility-first styling
Material-UI 6.3 - Component library
Framer Motion 11 - Animations
Lucide React - Icon library

Backend

Next.js API Routes - Serverless functions
NextAuth.js 4 - Authentication
MongoDB - Database
Mongoose 8 - ODM for MongoDB

AI & Generation

Google Generative AI (Gemini 2.0) - AI model for roadmap generation
Axios - HTTP client

Document Generation

jsPDF - PDF generation
jsPDF-AutoTable - Tables in PDFs

Markdown Processing

React Markdown - Markdown rendering
remark-gfm - GitHub Flavored Markdown
remark-emoji - Emoji support
rehype-raw - HTML in markdown
rehype-sanitize - Sanitize HTML

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher) - Download
npm, yarn, or pnpm - Package manager
MongoDB - Atlas (cloud) or local instance
GitHub Account - For OAuth authentication

Installation

Clone the repository

git clone https://github.com/XploY04/Ascend.git
cd Ascend

Install dependencies

Using npm:
```
npm install
```
Using pnpm (recommended):
```
pnpm install
```
Using yarn:
```
yarn install
```
Set up environment variables

Create a .env.local file in the root directory (see Environment Variables section below)
Run the development server
```
npm run dev
# or
pnpm dev
# or
yarn dev
```
Open your browser

Navigate to http://localhost:3000 to see the application

Environment Variables

Create a .env.local file in the root directory with the following variables:

# MongoDB Connection
MONGO_KEY=mongodb+srv://your-connection-string

# NextAuth Configuration
NEXTAUTH_SECRET=your-secret-key-generate-with-openssl
NEXTAUTH_URL=http://localhost:3000

# GitHub OAuth (Get from: https://github.com/settings/developers)
GITHUB_ID=your-github-oauth-app-id
GITHUB_SECRET=your-github-oauth-app-secret

# Google Generative AI (Get from: https://makersuite.google.com/app/apikey)
AI_KA_KEY=your-google-gemini-api-key

How to Get API Keys:

MongoDB:
- Sign up at MongoDB Atlas
- Create a cluster and get your connection string
NextAuth Secret:
```
openssl rand -base64 32
```
GitHub OAuth:
- Go to GitHub Developer Settings
- Create a new OAuth App
- Set Authorization callback URL: http://localhost:3000/api/auth/callback/github
- Copy Client ID and generate Client Secret
Google Gemini API:
- Visit Google AI Studio
- Create an API key for Gemini

💡 Usage

Creating Your First Roadmap

Sign In
- Click "Get Started" on the landing page
- Authenticate with your GitHub account
Navigate to Chatbot
- Click on the chatbot icon or "Try AI Chatbot" button
- You'll be taken to the AI-powered chat interface
Describe Your Goal
- Type your learning objective in natural language
- Example: "I want to become a full-stack developer in 3 months"
- Example: "Create a roadmap to learn machine learning for beginners"
- Example: "Help me prepare for Google software engineer interview"
Review Generated Roadmap
- The AI will generate a structured roadmap with:
  - Timeline-based sections
  - Topics to learn
  - Resources and links
  - Focus areas
- Review the markdown-rendered output
Refine (Optional)
- Ask follow-up questions to adjust the roadmap
- Request more details on specific topics
- Modify timelines or focus areas
Save Your Roadmap
- Click the "Save" button
- Provide a title and description
- Your roadmap is now saved to your profile
Track Progress
- Go to your dashboard
- Open your saved roadmap
- Mark sections as completed as you progress
- View your progress percentage
Export as PDF
- Open any roadmap
- Click the "Download PDF" button
- Get a professional PDF document

📁 Project Structure

Ascend/
├── app/                          # Next.js App Router directory
│   ├── api/                      # API routes
│   │   ├── auth/                 # NextAuth endpoints
│   │   ├── generate/             # AI roadmap generation
│   │   ├── markdownToJson/       # Roadmap data fetching
│   │   ├── edit/                 # Roadmap editing
│   │   ├── users/                # User management
│   │   └── activity/             # Activity tracking
│   ├── chatbot/                  # Chatbot interface
│   │   └── page.tsx              # Main chatbot page
│   ├── components/               # Reusable React components
│   │   ├── header.tsx            # Navigation header
│   │   ├── profile.tsx           # User profile sidebar
│   │   ├── ReadmeViewer.tsx      # Markdown renderer
│   │   ├── repositoryCard.tsx    # Roadmap card display
│   │   ├── contributionsGraph.tsx # Activity graph
│   │   ├── activityFeed.tsx      # Activity timeline
│   │   ├── EditDialog.tsx        # Roadmap editing modal
│   │   ├── SaveDialog.tsx        # Save roadmap modal
│   │   └── footer.tsx            # Footer component
│   ├── landing/                  # Landing page
│   │   └── page.tsx              # Public landing page
│   ├── roadmap/                  # Roadmap viewing
│   │   └── [id]/                 # Dynamic roadmap routes
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout
│   ├── page.tsx                  # Home/Dashboard page
│   └── providers.tsx             # Context providers
├── public/                       # Static assets
│   └── *.svg                     # SVG icons
├── utils/                        # Utility functions
│   ├── db.ts                     # MongoDB connection & schemas
│   └── pdfGenerator.ts           # PDF generation utility
├── .gitignore                    # Git ignore rules
├── .npmrc                        # npm configuration
├── eslint.config.mjs             # ESLint configuration
├── next.config.js                # Next.js configuration
├── package.json                  # Dependencies
├── postcss.config.mjs            # PostCSS configuration
├── tailwind.config.ts            # Tailwind CSS configuration
├── tsconfig.json                 # TypeScript configuration
├── vercel.json                   # Vercel deployment config
└── README.md                     # This file

🔌 API Documentation

Authentication Endpoints

`GET /api/auth/signin`

Sign in with GitHub OAuth

`GET /api/auth/signout`

Sign out current user

`GET /api/auth/session`

Get current user session

Roadmap Endpoints

`PUT /api/generate`

Generate a new roadmap using AI

Request Body:

{
  "prompt": "I want to learn React in 3 months"
}

Response:

{
  "markdown": "# React Learning Roadmap\n\n...",
  "sections": [...]
}

`GET /api/markdownToJson`

Fetch all roadmaps for the authenticated user

Response:

[
  {
    "_id": "...",
    "name": "react-roadmap",
    "title": "React Learning Path",
    "description": "3 month React journey",
    "sections": [...],
    "lastUpdated": "2024-01-01"
  }
]

`POST /api/edit`

Save or update a roadmap

Request Body:

{
  "title": "My Roadmap",
  "description": "Description",
  "markdownContent": "# Content...",
  "sections": [...]
}

User Endpoints

`GET /api/users/profile`

Get current user profile

`PUT /api/users/profile`

Update user profile

Activity Endpoints

`GET /api/activity`

Get user activity feed

🔧 Development

Running Linting

npm run lint

Building for Production

npm run build

Starting Production Server

npm run start

Using Turbopack (Development)

The project is configured to use Turbopack for faster development:

npm run dev
# This runs: next dev --turbopack

🌐 Deployment

Deploy on Vercel

The easiest way to deploy Lakshya is using the Vercel Platform:

Push to GitHub
```
git push origin main
```
Import in Vercel
- Go to vercel.com
- Import your GitHub repository
- Configure environment variables
- Deploy
Environment Variables
- Add all variables from .env.local in Vercel dashboard
- Update NEXTAUTH_URL to your production domain

Deploy on Other Platforms

The project includes a vercel.json configuration but can be deployed to any platform supporting Next.js:

Netlify: Use Next.js plugin
AWS Amplify: Connect GitHub repository
DigitalOcean App Platform: Deploy from GitHub
Railway: One-click deployment
Render: Deploy as web service

Make sure to:

Set all environment variables
Configure MongoDB connection for production
Update OAuth callback URLs

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

How to Contribute

Fork the Project
Create your Feature Branch
```
git checkout -b feature/AmazingFeature
```
Commit your Changes
```
git commit -m 'Add some AmazingFeature'
```
Push to the Branch
```
git push origin feature/AmazingFeature
```
Open a Pull Request

Development Guidelines

Follow the existing code style and conventions
Write meaningful commit messages
Add comments for complex logic
Test your changes thoroughly
Update documentation as needed

Areas for Contribution

🐛 Bug fixes
✨ New features
📝 Documentation improvements
🎨 UI/UX enhancements
🌐 Internationalization
♿ Accessibility improvements
🧪 Testing coverage

📄 License

If you wish to use, modify, or distribute this code, please contact the repository owner.

🙏 Acknowledgments

Next.js - The React Framework for Production
Vercel - Deployment and hosting platform
Google AI - Gemini 2.0 Flash model for AI generation
GitHub - OAuth authentication and inspiration for UI
MongoDB - Database solution
Tailwind CSS - Styling framework
Material-UI - Component library
Lucide - Beautiful icon set
React Markdown - Markdown rendering

📞 Support

If you have any questions or need help:

🐛 Open an Issue
💬 Start a Discussion
⭐ Star the project if you find it helpful!

Made with ❤️ by the Lakshya Team

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 71 Commits
app		app
public		public
utils		utils
.gitignore		.gitignore
.npmrc		.npmrc
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json

License

XploY04/Ascend

Folders and files

Latest commit

History

Repository files navigation