Frontend Forge platform with Admin Panel

Project Description

A full-stack blog application built with Next.js featuring a public-facing blog, user dashboard, and admin panel for content management. The project includes multiple learning resources, interview preparation tools, and content management capabilities.

Installation & Setup Instructions

1. Clone the repository
2. Install dependencies: npm install
3. Run the development server: npm run dev
4. Open http://localhost:3000 to view the application

Tech Stack

• Frontend: Next.js 15, React 18, Tailwind CSS, Motion (animations)
• Backend: Next.js API routes
• Database: MongoDB with Mongoose
• Image Management: Cloudinary
• UI Libraries: Radix UI, Lucide React, React Icons
• Internationalization: next-intl
• Forms & Validation: React Hook Form
• Data Fetching: TanStack React Query
• Styling: Tailwind CSS with class-variance-authority

Folder Structure

blog-app-and-admin-panel/
├── src/                  # Source code directory
│   ├── app/              # Next.js app router (Next.js 13+ structure)
│   │   ├── (public)/     # Public routes group
│   │   │   ├── (marketing)/  # Marketing pages
│   │   │   │   └── page.jsx      # Marketing home page
│   │   │   ├── blogs/
│   │   │   │   ├── [id]/         # Dynamic blog post route
│   │   │   │   │   └── page.jsx  # Individual blog post page
│   │   │   │   └── page.jsx      # Blog listing page
│   │   │   ├── login/
│   │   │   │   └── page.jsx
│   │   │   ├── signin/
│   │   │   │   └── page.jsx
│   │   │   ├── test/
│   │   │   │   └── page.jsx
│   │   │   └── layout.jsx        # Public section layout
│   │   ├── admin/        # Admin routes group
│   │   │   └── dashboard/    # Admin dashboard
│   │   │       ├── layout.jsx   # Admin dashboard layout
│   │   │       └── page.jsx     # Admin dashboard page
│   │   ├── dashboard/    # User routes group
│   │   │   ├── layout.jsx       # Dashboard layout
│   │   │   ├── page.jsx         # Dashboard main page
│   │   │   ├── ai-assistant/    # AI Assistant section
│   │   │   ├── best-practices/  # Best Practices section
│   │   │   ├── blogs/           # User blogs section
│   │   │   ├── bookmarks/       # Bookmarks section
│   │   │   ├── challenges/      # Challenges section
│   │   │   ├── cheat-sheets/    # Cheat Sheets section
│   │   │   ├── documentation/   # Documentation section
│   │   │   ├── feed/            # Feed section
│   │   │   ├── how-to/          # How-to guides section
│   │   │   ├── interviews/      # Interview prep section
│   │   │   ├── mock-interviews/ # Mock interviews section
│   │   │   ├── notes/           # Notes section
│   │   │   ├── resume-review/   # Resume review section
│   │   │   ├── roadmaps/        # Learning roadmaps section
│   │   │   ├── settings/        # Settings section
│   │   │   ├── tips-and-tricks/ # Tips & Tricks section
│   │   │   ├── troubleshooting/ # Troubleshooting section
│   │   │   └── tutorials/       # Tutorials section
│   │   ├── api/          # API routes for backend functionality
│   │   │   ├── blogs/        # Blog endpoints
│   │   │   │   ├── route.js
│   │   │   │   ├── categories/ # Blog categories
│   │   │   │   └── [id]/      # Dynamic blog post endpoints
│   │   │   ├── connections/   # Connections API
│   │   │   ├── emails/        # Email API
│   │   │   ├── interviews/    # Interview API
│   │   │   └── test/          # Test API
│   │   ├── auth/         # Authentication routes (placeholder for future implementation)
│   │   ├── favicon.ico   # Site favicon
│   │   ├── globals.css   # Global CSS styles
│   │   └── layout.jsx    # Root layout component
│   ├── components/       # Reusable React components
│   │   ├── admin/        # Admin-specific components
│   │   │   ├── AdminBreadcrumbs.jsx
│   │   │   └── AdminSidebar.jsx
│   │   ├── blog/         # Blog-related components
│   │   │   ├── BlogCard.jsx              # Blog post card
│   │   │   ├── CategoriesTabs.jsx        # Category navigation
│   │   │   └── LatestBlogSection.jsx     # Latest blogs section
│   │   ├── dashboard/    # Dashboard-specific components
│   │   │   ├── app-sidebar.jsx
│   │   │   ├── UserBreadcrumbs.jsx
│   │   │   ├── routes.js
│   │   │   ├── existingDashboardPages.js
│   │   │   └── missingDashboardPages.js
│   │   ├── interviews/   # Interview-related components
│   │   │   ├── AnswerMarkdownRenderer.jsx
│   │   │   ├── CodeBlock.jsx
│   │   │   ├── LatestIntervQSection.jsx
│   │   │   ├── QuestionTypeIcon.jsx
│   │   │   └── TheoreticalCard.jsx
│   │   ├── marketing/    # Marketing page components
│   │   │   ├── HeroSection.jsx          # Hero banner section
│   │   │   └── NewsLetterSection.jsx    # Newsletter signup section
│   │   ├── shared/       # Shared/common components
│   │   │   ├── NavLinks.jsx             # Navigation links
│   │   │   ├── PublicFooter.jsx         # Footer component
│   │   │   ├── PublicNavbar.jsx         # Navigation bar
│   │   │   └── ThemeSwitch.jsx          # Theme toggle
│   │   ├── dashboard-preview/
│   │   │   └── dashboard-preview.jsx
│   │   ├── skeleton/     # Skeleton loading components
│   │   │   └── blogsSkeleton/
│   │   ├── ui/           # Base UI components and design system
│   │   │   ├── avatar.jsx
│   │   │   ├── BlurText.jsx
│   │   │   ├── breadcrumb.jsx
│   │   │   ├── Button.jsx
│   │   │   ├── ButtonLink.jsx
│   │   │   ├── collapsible.jsx
│   │   │   ├── dropdown-menu.jsx
│   │   │   ├── Error.jsx
│   │   │   └── input.jsx
│   │   ├── nav-main.jsx
│   │   ├── nav-projects.jsx
│   │   ├── nav-secondary.jsx
│   │   └── nav-user.jsx
│   ├── hooks/            # Custom React hooks
│   │   ├── useBlogById.js
│   │   ├── useFetchBlogs.js
│   │   ├── useFetchCategories.js
│   │   └── useMobile.js
│   ├── lib/              # Utility functions and libraries
│   │   ├── models/       # Database models
│   │   │   ├── BlogModel.js        # Blog data model
│   │   │   └── QuestionSchema.js   # Question/Interview data model
│   │   ├── auth/         # Authentication utilities
│   │   │   └── utils.js  # Token generation, verification, password hashing
│   │   ├── config/       # Configuration helpers
│   │   │   ├── cloudinary.js  # Cloudinary setup
│   │   │   └── mongodb.js     # MongoDB connection
│   │   └── utils.js      # General utility functions
│   ├── utils/            # Utility functions
│   │   ├── generateSlug.js   # URL slug generator
│   │   └── uploadImage.js    # Image upload handler
│   ├── providers/        # React context providers
│   │   ├── AppProviders.jsx      # Main app provider wrapper
│   │   ├── AuthProvider.jsx      # Authentication context
│   │   ├── ReactQueryProvider.jsx # React Query context
│   │   ├── ThemeProvider.jsx     # Theme context
│   │   └── ToastProvider.jsx     # Toast notification context
│   ├── i18n/             # Internationalization (i18n)
│   │   ├── config.js     # i18next configuration
│   │   ├── i18n-helper.js  # Helper for loading i18n messages
│   │   └── request.js    # i18n API requests
│   ├── messages/         # i18n message files
│   │   ├── ar.json       # Arabic translations
│   │   └── en.json       # English translations
│   └── assets/           # Application assets
│       └── assets.js     # Asset exports
├── public/               # Static assets
│   ├── file.svg
│   ├── globe.svg
│   ├── logo.png
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── .eslintrc.json        # ESLint configuration
├── .gitignore            # Git ignore rules
├── .env.local            # Environment variables
├── jsconfig.json         # JavaScript configuration
├── next.config.mjs       # Next.js configuration
├── postcss.config.mjs    # PostCSS configuration
├── tailwind.config.js    # Tailwind CSS configuration
├── package.json          # Project dependencies and scripts
├── package-lock.json     # Dependency lock file
├── README.md             # Project documentation
└── TheSteps.MD           # Development setup guide

Features

• Public Blog: Browse and read published blog articles
• Blog Categories: Organized blog posts by topic
• Admin Dashboard: Admin panel for managing content
• User Dashboard: Personalized dashboard with multiple learning resources and tracking
• Learning Resources: Access to tutorials, best practices, tips & tricks, troubleshooting guides
• Interview Preparation: Interview questions, mock interviews, and theoretical cards
• Content Management: Organize content across various categories including:
  • AI Assistant resources
  • Cheat sheets
  • Documentation
  • Challenges
  • Roadmaps
  • Bookmarks
  • Notes
  • Resume review guides
• Image Upload: Integration with Cloudinary for image management
• Database Integration: MongoDB with Mongoose for data persistence
• Multi-language Support: Internationalization (i18n) with Arabic and English translations
• Responsive Design: Tailwind CSS for responsive UI across devices
• Dark/Light Theme: Theme switching support with next-themes

Project Status

This project is actively under development. The core blog and dashboard infrastructure is in place with multiple learning resource sections and admin management capabilities.

Roadmap

• User authentication system (auth routes prepared but not yet implemented)
• Comment functionality on blog posts
• Search functionality across content
• Content creation and editing UI in admin panel
• User profile and preference management
• Advanced dashboard analytics
• Content recommendation system

Challenges Faced & Solutions

1. React Version Compatibility

   • Challenge: The project was initially set up with React 19 RC (Release Candidate), which caused compatibility issues with libraries like framer-motion and BlurText because these libraries aren’t fully optimized for React 19 yet.
   • Solution: Downgraded React and ReactDOM to version 18 to ensure library stability and predictable rendering behavior.

---

2. Text Animation with <BlurText />

   • Challenge: Inserting <br /> directly inside the text prop of <BlurText /> caused runtime errors (text.split is not a function) because the component was designed to process a string, not JSX.
   • Solution: Separated the text into two <BlurText /> components and controlled their visibility using useState.

---

3. Layout Shifting During Animation (Second Line)

   • Challenge: When animating the second line of the heading, the line appeared suddenly and caused layout shifting because the space wasn’t reserved until the text rendered.
   • Solution: Rendered an invisible placeholder <h1> with the same styles to preserve layout space. When the animation triggered, it replaced the placeholder seamlessly, preventing layout shifts.

---

4. Sequential Animation Triggering

   • Challenge: Needed the second line to animate only after the first line finished animating, but <BlurText /> didn’t have built-in support for animation sequencing.
   • Solution: Leveraged the onAnimationComplete callback of the first <BlurText /> to update a secondLineVisible state. This state conditionally rendered the second <BlurText />, creating a smooth sequential animation.

---

5. UI Mockups vs. Real Data

   • Challenge: The landing page was designed with mock data, making it harder to test responsiveness and interactivity.
   • Solution: Locked in static mockups first to finalize design decisions, with plans to integrate real backend data later.

---

6. Library Weight Considerations (ogl)

   • Challenge: Considering adding 3D/visual effects with ogl, but this could negatively impact performance in a dashboard-focused app.
   • Solution: Deferred adding heavy libraries until after the core functionality is stable and performance benchmarks are set.

---

7. Project Roadmap Clarity

   • Challenge: Unsure whether to complete all frontend UI before backend development or work on both in parallel.
   • Solution: Decided to complete a frontend skeleton (components, layouts, routing) first, then shift focus to backend APIs, followed by integration and refinement.

---

Key Dependencies

UI & Animation

• Motion: Animation library for smooth transitions and visual effects
• Radix UI: Accessible component primitives (Avatar, Dropdown, Dialog, Tooltip, etc.)
• Lucide React: Icon library with 546+ icons
• React Icons: Additional icon library

Forms & Validation

• React Hook Form: Efficient form state management
• Class Variance Authority: CSS class utility for building UI variants

Data & API

• Axios: HTTP client for API requests
• TanStack React Query: Powerful data fetching and caching
• TanStack React Query DevTools: Debugging tools for React Query
• Mongoose: MongoDB object modeling

Internationalization

• next-intl: Next.js internationalization solution
• Markdown Support: react-markdown with syntax highlighting

Styling & Theme

• Tailwind CSS: Utility-first CSS framework
• next-themes: Theme provider for dark/light mode
• tailwindcss-animate: Tailwind animation utilities
• tailwind-merge: Smart Tailwind class merging

Media & Storage

• Cloudinary: Cloud-based image management
• OGL: WebGL library for 3D graphics (optional)