Personal
Idea Drop

IdeaDrop is a web app for sharing and browsing startup ideas and side hustles. Visitors can skim recent ideas on the home page, browse the full list, and open any idea for its full write-up. Creating, editing, or deleting ideas requires an account; each idea has a title, summary, description, and optional tags, and belongs to the user who posted it.
The product is intentionally lean—no voting or comments, just list, detail, and owner-managed CRUD. Auth uses short-lived JWT access tokens plus httpOnly refresh cookies so sessions can renew quietly in the browser. Under the hood it is a React frontend (TanStack Start, Tailwind) talking to an Express API on MongoDB.
The app was primarily built to explore React coding concepts, not as a real production product. It practices core hooks like useState and useEffect, a custom useAuth hook over React Context for global auth state, and controlled forms with local state and submit handlers. Routing is file-based with TanStack Router—loaders, layout shells, pathless auth routes, typed params, and navigation—while TanStack Query covers prefetching in loaders, useSuspenseQuery for reads, and useMutation for create/update/delete and login/register.
Beyond that, the UI leans on component composition, conditional rendering for auth-gated and owner-only actions, list rendering with keys, and client-side session handling (in-memory access token, Axios interceptors, and context updates on login/logout). Taken together, IdeaDrop is a lightbulb-branded practice space for dropping ideas into the open while working through modern React patterns end to end.
Skills & Technologies
- React
- React Hooks
- React Context API
- Custom Hooks
- TanStack Start
- TanStack Router
- TanStack Query
- Controlled Forms
- Conditional Rendering
- Component Composition
- TypeScript
- Vite
- Tailwind CSS
- Axios
- Lucide React
- Node.js
- Express
- MongoDB
- Mongoose
- JWT Authentication
- bcrypt
- REST APIs
- HTTP-only Cookies
- CORS
- Vitest
- Testing Library