FullstackSchool

A modern, interactive learning platform that visualizes technology stacks and learning paths. Explore frontend, backend, databases, and infrastructure with visual tech trees, interactive cards, and curated roadmaps.

---

---

Features

• Interactive tech tree visualization using React Flow
• Category-based exploration: Frontend, Backend, Database, Infrastructure
• Modern landing page with animated hero, previews, and social proof
• Flip-card style technology details with resources and descriptions
• Smooth page transitions and animations via Framer Motion
• Responsive, mobile-first UI

Tech Stack

• Frontend: React 18, Framer Motion, React Flow, AOS (Animate on Scroll)
• Styling: CSS modules per component, responsive design
• Routing: react-router-dom (in codebase; navigation is state-driven inside App)
• Backend: Express (static file server for production build)
• Build Tooling: Create React App (react-scripts)

Project Structure

.
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.jsx
│   ├── index.js
│   ├── styles/
│   │   └── globals.css
│   ├── data/
│   │   ├── techlist.json
│   │   └── techtree.json
│   ├── components/
│   │   ├── Navbar.jsx / Navbar.css
│   │   ├── HeroSection.jsx / HeroSection.css
│   │   ├── LandingPage.jsx / LandingPage.css
│   │   ├── AboutSection, HowItWorks, PreviewSection
│   │   ├── TechTree.jsx / TechTree.css (visual graph)
│   │   ├── TechGrid.jsx / TechCard.jsx and styles
│   │   └── SearchBar, CategorySelector, Footer
│   └── pages/
│       ├── Frontend.jsx
│       ├── Backend.jsx
│       ├── Database.jsx
│       └── Infrastructure.jsx
├── server.js              # Express server for production
├── package.json
└── README.md

Getting Started

Prerequisites:

• Node.js 18+
• npm 8+

Install dependencies:

npm install

Run in development (CRA dev server):

npm run dev

This runs the app in development mode on http://localhost:3000 with hot reload.

Build for production:

npm run build

This creates an optimized production build in the build/ folder.

Serve production build with Express:

npm start

This runs node server.js which serves the build/ directory at http://localhost:3000.

Available Scripts

• dev: Start CRA dev server
• build: Build the app for production
• start: Serve the production build via Express
• test: Run CRA test runner
• eject: Eject CRA configuration

.json: Flat list of technologies with metadata used by TechGrid/TechCard

Key Components

• Navbar: Top navigation with category entries and mobile menu
• LandingPage: Hero, About, How It Works, Preview, Features, Social proof, Final CTA
• TechTree: Visual dependency map (React Flow)
• TechGrid + TechCard: Interactive cards with flip animations/resources
• SearchBar + CategorySelector: Quick filtering and category selection

---