Project Goals

🚀 SCNOTES Development Roadmap (4-Week Sprint)

Welcome to the team! This roadmap is designed to take SCNOTES from a basic local-storage app to a full-stack, professional note-taking platform.

---

🎨 Frontend Roadmap (4 Weeks)

Focus: User Experience (UX), Modern Design, and State Management.

Week 1: Modernizing the Foundation

• Goal: Transition from Vanilla HTML/CSS to a modern framework.
• Tasks:
  1. Initialize the project using Vite + React.
  2. Setup Tailwind CSS for styling.
  3. Design a "Clean & Minimalist" layout with a sidebar for categories and a main area for notes.
• Hints:
  • Use Lucide React for high-quality icons.
  • Focus on a "Mobile-First" responsive design.

Week 2: Auth Integration & State Management

• Goal: Handle how users log in and how data flows through the app.
• Tasks:
  1. Create login and registration forms with validation.
  2. Implement Zustand or React Context to manage "Notes" and "User" state.
  3. Create "Protected Routes" (users can't see notes unless logged in).
• Hints:
  • Store the backend JWT in localStorage or a cookie.
  • Use react-router-dom for navigation.

Week 3: The "Killer" Features

• Goal: Make the app better than a simple text box.
• Tasks:
  1. Markdown Support: Use react-markdown so users can write bold, lists, and code blocks.
  2. Live Search: A search bar that filters notes as the user types.
  3. Dark Mode: A toggle for late-night note-taking.
• Hints:
  • Use a debounce function for search to avoid too many re-renders.
  • Tailwind's dark: modifier is your best friend here.

Week 4: Polish & PWA

• Goal: Make it feel like a premium product.
• Tasks:
  1. Animations: Use Framer Motion for smooth fades and slide-ins when adding/deleting notes.
  2. PWA Support: Make the app "Installable" on phones.
  3. Deployment: Push to Vercel or Netlify (Free).
• Hints:
  • Check "Vite PWA Plugin" for easy setup.
  • Ensure all buttons have hover and active states for feedback.

---

⚙️ Backend Roadmap (4 Weeks)

Focus: API Architecture, Data Security, and Scalability.

Week 1: Database & Auth Setup

• Goal: Create the "Brain" of the application.
• Tasks:
  1. Setup a Node.js + Express server.
  2. Connect to MongoDB Atlas (Free Tier).
  3. Implement User Sign-up and Login using JWT (JSON Web Tokens).
• Hints:
  • Use bcrypt to hash passwords before saving them (Never save plain text!).
  • Use dotenv to keep your DB credentials safe.

Week 2: CRUD API (Create, Read, Update, Delete)

• Goal: Allow the frontend to save and retrieve notes.
• Tasks:
  1. Create a Note Schema (Title, Content, Folder, CreatedAt, UserID).
  2. Build endpoints: GET /notes, POST /notes, PUT /notes/:id, DELETE /notes/:id.
  3. Ensure users can only see their own notes.
• Hints:
  • Create a checkAuth middleware to verify the JWT on every request.
  • Log every error to the console for easier debugging.

Week 3: Advanced Organizers

• Goal: Add logic for sorting and filtering.
• Tasks:
  1. Tagging Logic: Allow users to add an array of tags to a note.
  2. Search Endpoint: Create a GET /notes/search?q=... using MongoDB $regex.
  3. Pinned Notes: Logic to keep important notes at the top.
• Hints:
  • Use Mongoose .find({ $or: [...] }) for searching both titles and content.

Week 4: Security & Deployment

• Goal: Prepare for the public.
• Tasks:
  1. Rate Limiting: Prevent bots from spamming your API.
  2. API Documentation: Write a simple README explaining how to use each endpoint.
  3. Deployment: Deploy to Render.com (Free tier).
• Hints:
  • Use cors package to allow your frontend to talk to your backend.
  • Render's free tier "sleeps" after inactivity—mention this in your docs!

---

🐍 Backend Roadmap (4 Weeks) with Python FastAPI

Focus: High-Performance APIs, Type Safety, and Scalable Data.

Week 1: Environment & Auth Foundation

• Goal: Setup the FastAPI server and handle User security.
• Tasks:
  1. Initialize a virtual environment (venv) and install fastapi, uvicorn, and motor (for MongoDB).
  2. Connected to MongoDB Atlas (Free Tier).
  3. Implement User Sign-up and Login using OAuth2 + JWT.
• Hints:
  • Use Passlib with bcrypt for password hashing.
  • FastAPI has built-in support for security—check the "Security" section in the docs!

Week 2: CRUD API (Create, Read, Update, Delete)

• Goal: Build the core endpoints for note management.
• Tasks:
  1. Define Pydantic Models for Note and User.
  2. Build endpoints: GET /notes, POST /notes, PUT /notes/{id}, DELETE /notes/{id}.
  3. Implement a "Dependency" to extract the current user from the JWT token.
• Hints:
  • Use Annotated[User, Depends(get_current_user)] to protect your routes.

Week 3: Search & Slack Integration

• Goal: Advanced data retrieval and connections.
• Tasks:
  1. Full-Text Search: Implement a search endpoint using MongoDB's $text index.
  2. Slack Integration: Create a POST /notes/{id}/share endpoint.
  3. Pinned Logic: Create a boolean field is_pinned and sort results by it.
• Hints:
  • Use the httpx library in Python to send the POST request to Slack's API.

Week 4: Deployment & Docs

• Goal: Finalize and go live.
• Tasks:
  1. Middleware: Setup CORS Middleware.
  2. Optimization: Ensure all DB calls are async.
  3. Deployment: Deploy to Render.com or Railway.app.
• Hints:
  • Every FastAPI app comes with /docs automatically!

---

🛠️ Recommended Free Tools

• Frontend: Vercel (Hosting), Figma (Design).
• Backend: Render (Hosting), MongoDB Atlas (Database).
• Testing: Postman (Testing APIs).
• Communication: Slack: Notes-App Channel