- Project Documentation: File Management System
- Project Name: File Management System
- Description: A mini google drive clone, With features that enable users to store different types of files on the cloud, get access to files, have organizational and personal accounts, search through and download files.
- Objective: Learn NextJs, Convex, and Clerk
- Frontend: Next.js
- UI Library: Shadcn
- Backend: Convex
- Authentication: Clerk
- Icons: Lucide Icons
-
Environment Setup:
-
- Default For options
npx create-next-app@latest my-app npm install convex- Set up a Convex dev deployment
npx convex dev - Create a client component for the Convex provider and Wire up the ConvexClientProvider (wrap the children of the body element with the provider)
- Verify you have Next's public convex url set up in .env
- Run your next app
npm run dev
- Default For options
-
- Create a new application on the clerk dashboard with the sign up option you prefer
- Copy and add the API keys to .env
- Set up JWT for convex, Copy
Issuerkey and Apply changes - create an auth config file Paste in the Issuer URL from the JWT template and set applicationID to "convex" (Deploy changes on convex)
- Install clerk nextjs
npm install @clerk/nextjs - Wrap the convex provider with the clerk provider
- Create a clerk middleware file Auth to end points faster
- You can add public routes
publicRoutes: ["/];
- You can add public routes
-
npx shadcn@latest init
-
-
Dependencies: [List all major dependencies installed and why you used them.]
- Overview: [Explain how you structured your pages and set up routing. Mention any dynamic routing or API routes created.]
- Examples: [Provide examples of page and route structures, possibly with code snippets.]
- Tools Used: [Mention any libraries like React Context, Redux, or others.]
- Approach: [Explain how you manage the global/local state in your application.]
- Methods: [Describe how you're fetching data from the backend (e.g., using
getServerSideProps,getStaticProps, orSWR).] - Challenges: [Mention any issues faced during data fetching, such as slow API responses or handling loading states.]
- Overview: [Explain how you handle errors in both the frontend and during API calls.]
- Examples: [Provide code examples of error boundaries, try-catch blocks, etc.]
- Overview: [Document the component structure, how reusable components are created, and how they interact with the Next.js pages.]
- Example: [Provide a structure of a key component, showing its props and functions.]
- Tools: [List the styling approach (e.g., CSS Modules, TailwindCSS, etc.) and explain any customizations.]
- Examples: [Highlight any key styling challenges or unique design aspects you implemented.]
- Overview: [Explain how you integrated Lucide Icons with the UI components.]
- Examples: [Provide examples of how you used icons across the UI.]
- Overview: [Describe how the database is structured, the relationships between entities, and any specific schema decisions.]
- Examples: [Include code snippets of the schema design.]
- Overview: [Explain how the API is structured and what endpoints were created.]
- Challenges: [Document any design challenges, such as query optimizations or rate-limiting.]
- Overview: [Mention how you handle data mutations, transactions, and validations.]
- Examples: [Provide examples of key backend logic.]
- Steps: [Explain the steps taken to set up Clerk and configure it with Next.js.]
- Challenges: [Document any specific challenges or key configurations.]
- Overview: [Explain how you protect routes using Clerk authentication.]
- Examples: [Provide examples of protecting API routes or Next.js pages.]
- Overview: [Summarize all major challenges faced throughout the project.]
- Solutions: [Provide solutions or workarounds you implemented, along with lessons learned.]
- Potential Features: [List any additional features or improvements you’d like to add later.]
- Optimizations: [Mention performance optimizations or code refactoring plans.]