A modern, full-stack workflow management dashboard built for digital content creators. Whether planning viral YouTube challenges, experimental shorts, or Instagram reels, this workspace helps creators organize, track, and manage their video ideas from the initial spark to the final upload.
Built with the MERN Stack (MongoDB, Express, React, Node.js) and styled with Tailwind CSS.
- 📱 Fully Responsive Design: A mobile-first layout featuring a custom slide-in sidebar with a hamburger menu for seamless usage across all devices.
- 🎨 Premium Dark UI: A sleek, distraction-free dark theme built entirely with Tailwind CSS and custom CSS Grid layouts.
- 🔄 Full CRUD Operations: Seamlessly Create, Read, Update, and Delete video ideas with real-time database syncing.
- 🔍 Real-time Search & Filtering: Implemented advanced React "State Lifting" to filter ideas instantly by status (Scripting, Shooting, Editing, etc.) or search via keywords.
- 📊 Dynamic Progress Tracking: Visual status bars that dynamically update and change colors based on the production stage of the video.
- ✍️ Form Handling & State: Handled complex form states for capturing video titles, hooks, thumbnail concepts, and categories.
- Frontend: React.js, Tailwind CSS
- Backend: Node.js, Express.js (REST API)
- Database: MongoDB
- Icons & Assets: Custom SVGs and Native Emojis
DESKTOP View
MOBILE View
Follow these steps to run the frontend locally on your machine.
- Node.js installed on your machine.
- The backend API repository must be running locally on
http://localhost:5000.
- Clone the repository:
git clone [https://github.com/ankit06-webdev/creator-workspace-frontend.git]
- Navigate into the directory:
cd creator-workspace-frontend- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and visit http://localhost:5173 (or the port provided by Vite).
Building this project was a deep dive into modern frontend architecture. I focused heavily on structuring scalable layouts using CSS Grid and Flexbox, making the UI 100% responsive without breaking the design. I also mastered managing complex state across multiple components using props and hooks, and successfully bridged the gap between a React frontend and an Express/MongoDB backend via asynchronous API calls.
I'm actively building projects and learning in public. Feel free to connect or reach out!
GitHub: @ankit06-webdev
LinkedIn: https://www.linkedin.com/in/ankit-kumar-100238365/