codespace

byDark “V R OFICIAL亗”

Create a modern, full-stack web application called **CodeVault**, where users can register, log in, upload/post their source code, save it permanently, search other users' code, and manage their own posts. ### Main Concept The website should work like a **code-sharing and code-storage platform**. A registered user can create a code post containing a title, description, source code, programming language, category, tags, and optional image/file. Once posted, the code must remain stored in the database until the user explicitly deletes it. ## 1. User Authentication Create a complete authentication system: * User Registration * Full Name * Username * Email * Password * Confirm Password * User Login * Email/Username * Password * Logout * Password hashing using bcrypt * JWT-based authentication * Protected routes * Forgot password / reset password * Proper validation and error messages ## 2. User Dashboard After login, users should have a personal dashboard showing: * Total posts * Total views * Total ratings/reviews received * Recent code posts * Saved/bookmarked posts * Profile information Dashboard should have a clean and modern UI. ## 3. Create Code Post Users should be able to create a new code post with: * Code title * Description * Programming language * Category * Tags * Source code editor * Optional image/screenshot * Optional project file upload * Public/Private visibility * Create/Post button Use a proper syntax-highlighted code editor. Supported languages should include: * HTML * CSS * JavaScript * Python * Java * C * C++ * C# * PHP * SQL * React * Node.js * Other When a user posts code, save all information permanently in the database. ## 4. Code Storage Each code post should have: * Unique post ID * User ID * Title * Description * Source code * Programming language * Category * Tags * Image/file URL * Visibility * Created date * Updated date * View count * Rating * Review count A user's code should NOT automatically disappear or expire. The code should remain available until: 1. The user deletes the post, or 2. An authorized admin removes it. Add confirmation before deleting a post. ## 5. Code Details Page Create a dedicated page for every code post. Show: * Title * Author profile * Programming language * Category * Tags * Description * Full source code * Syntax highlighting * Copy Code button * Download Code button * View count * Rating * Reviews * Created/updated date Add buttons: * Copy Code * Download * Bookmark/Save * Share * Report ## 6. Search System Create a powerful global search feature. Users should be able to search by: * Code title * Username * Programming language * Category * Tags * Keywords Search results should update properly and show relevant code posts. ## 7. Category Filter Create category filters such as: * Web Development * App Development * Python * Java * C/C++ * JavaScript * React * Node.js * Database * AI/ML * Data Science * Cybersecurity * DSA * Projects * Other Also provide filters for programming language and sorting. Sorting options: * Newest * Oldest * Most Viewed * Highest Rated * Most Reviewed ## 8. Reviews and Ratings Users should be able to review and rate code posts. Features: * 1 to 5 star rating * Written review * Edit own review * Delete own review * Average rating calculation * Display total number of reviews * Prevent duplicate rating from the same user * Users cannot rate their own code Display reviews below the code. ## 9. User Profile Create a complete profile management system. Profile should contain: * Profile picture * Full name * Username * Bio * Email * Skills * GitHub link * LinkedIn link * Website link * Total posts * Total views * Average rating Users should be able to: * Edit profile * Change profile picture * Change password * Update bio * Update social links * View their own code posts * Delete their posts ## 10. User's My Posts Page Create a page called **My Posts**. Display all code posted by the logged-in user. Each post should have: * Title * Language * Category * Views * Rating * Created date * Edit button * Delete button Allow users to edit and update their existing code. ## 11. Bookmark / Save Feature Allow users to bookmark interesting code posts. Create: **Saved Posts** page where users can see all bookmarked code. Users should be able to remove bookmarks. ## 12. Admin Authentication Create a separate secure admin login system. Admin should NOT use the normal user dashboard. Create: **Admin Login** with: * Admin email/username * Password * Secure authentication * Admin-only protected routes Only authorized admins should be able to access the admin dashboard. ## 13. Admin Dashboard Create a professional admin dashboard showing: * Total users * Total code posts * Total reviews * Total reports * Total views * Active users * Recent users * Recent posts Add charts/graphs for: * User registrations * Code posts * Reviews * Views * Categories * Programming languages ## 14. Admin User Management Admin should be able to: * View all users * Search users * View user profile * View user's posts * Suspend/activate users * Delete users when necessary Show proper confirmation dialogs before destructive actions. ## 15. Admin Code Management Admin should be able to: * View all code posts * Search posts * Filter posts * View code * Edit posts if necessary * Delete inappropriate posts * View reported posts ## 16. Report System Users should be able to report: * Code post * User * Review Report reasons: * Spam * Copyright issue * Offensive content * Malicious code * Duplicate content * Other Admin should have a **Reports Management** section to review and resolve reports. ## 17. Homepage Create an attractive homepage containing: * Navbar * Logo: CodeVault * Search bar * Login/Register buttons * Popular categories * Trending code * Recently uploaded code * Top-rated developers * Featured projects * Footer The design should look like a modern developer community platform. ## 18. UI/UX Use a professional developer-focused design. Requirements: * Responsive design * Mobile friendly * Desktop friendly * Tablet friendly * Dark mode * Light mode * Clean navigation * Modern cards * Code syntax highlighting * Loading animations * Toast notifications * Confirmation modals * Empty states * Error states * Skeleton loaders Use a modern color scheme suitable for a coding/developer platform. ## 19. Recommended Tech Stack Frontend: * React.js * React Router * Tailwind CSS * Context API or Redux Toolkit * Axios * Monaco Editor or another professional code editor * React Syntax Highlighter Backend: * Node.js * Express.js * REST API * JWT * bcrypt Database: * MongoDB * Mongoose Other: * Cloudinary for profile pictures and optional images * Proper API validation * Environment variables * Secure authentication * CORS * Error handling ## 20. Suggested Database Models Create these MongoDB models: ### User * name * username * email * password * profilePicture * bio * skills * github * linkedin * website * role * status * createdAt * updatedAt ### CodePost * userId * title * description * code * language * category * tags * image * file * visibility * views * averageRating * reviewCount * createdAt * updatedAt ### Review * userId * postId * rating * comment * createdAt * updatedAt ### Bookmark * userId * postId * createdAt ### Report * reporterId * postId * reportedUserId * reason * description * status * createdAt ## 21. Security Requirements Implement: * Password hashing * JWT authentication * Protected API routes * Role-based authorization * Input validation * Rate limiting where appropriate * Secure HTTP headers * MongoDB injection protection * XSS protection * Proper error handling * Never expose passwords in API responses * Never expose JWT secrets or database credentials ## 22. Important Requirement The most important feature is **persistent code storage**. When a user creates a code post: User → Frontend → Backend API → MongoDB The complete code must be stored in MongoDB and retrieved whenever the user opens the post. Do NOT store important code only in browser localStorage/sessionStorage. A user's code should remain in the database until the user or authorized admin deletes it. ## 23. Pages Create these pages: ### Public * Home * Explore Code * Code Details * Search Results * Login * Register * User Profile ### User * Dashboard * Create Post * Edit Post * My Posts * Saved Posts * Profile Settings * Change Password ### Admin * Admin Login * Admin Dashboard * Users Management * Posts Management * Reports Management * Reviews Management * Admin Profile/Settings ## 24. API Structure Create clean REST APIs such as: /api/auth /api/users /api/posts /api/reviews /api/bookmarks /api/reports /api/admin Use proper HTTP methods: GET POST PUT PATCH DELETE ## 25. Final Goal Build the complete working application, not just a UI prototype. The frontend, backend, MongoDB database, authentication, code storage, search, filtering, reviews, ratings, bookmarks, user profiles, and admin dashboard must all work together. Generate the project with a clean folder structure, reusable components, proper API integration, environment variables, validation, error handling, responsive UI, and production-ready code. First create the complete project structure and database architecture. Then implement the application step-by-step, making sure every feature is connected to the backend and database.