A comprehensive collection of React.js and Node.js starter kits and boilerplates for rapid application development. Built in May 2020, featuring modern web technologies including React.js, Node.js, Redux, Redux-Thunk, Redux-Saga, Redux-Toolkit, React Hooks, localStorage, Socket.io, SCSS, Express.js, Mongoose.js, and more.
Perfect as boilerplate templates for interviews, learning, or starting new projects quickly.
graph TB
subgraph "Starter Kits Repository"
ROOT[Root Directory]
subgraph "Client Kits"
CE[client-hooks-empty]
CRT[client-hooks-redux-thunk]
CRTK[client-hooks-redux-toolkit]
CLS[client-hooks-useState-local-storage]
CRS[client-redux-saga]
CRTH[client-redux-thunk]
CSL[client-simple-state-local-storage]
end
subgraph "Server Kits"
SE[server-empty]
end
subgraph "Full-Stack Projects"
FSE[project-server-express-empty---client-hooks-empty]
FSEA[project-server-external-api---client-hooks-redux-thunk]
FSEAS[project-server-external-api---client-hooks-redux-thunk---socket.io]
FSJ[project-server-JSON-files---client-hooks-redux-thunk]
FSM[project-server-MONGO-database---client-hooks-redux-thunk]
FSIO[project-server-socket-io-empty---client-hooks-empty]
end
subgraph "React Examples"
EX1[example-client-hooks-keep-scroll-position]
EX2[example-client-hooks-render-once]
EX3[example-complex-useRef]
EX4[example-context-api]
EX5[example-context-custom]
EX6[example-custom-hook-http]
EX7[example-custom-hook-simple]
EX8[example-next.js]
end
ROOT --> CE & CRT & CRTK & CLS & CRS & CRTH & CSL
ROOT --> SE
ROOT --> FSE & FSEA & FSEAS & FSJ & FSM & FSIO
ROOT --> EX1 & EX2 & EX3 & EX4 & EX5 & EX6 & EX7 & EX8
end
subgraph "External Data Sources"
TMDB[themoviedb API]
MONGO[MongoDB]
JSON[JSON Files]
SOCKET[Socket.io]
end
FSEA --> TMDB
FSEAS --> TMDB
FSEAS --> SOCKET
FSJ --> JSON
FSM --> MONGO
FSIO --> SOCKET
subgraph "Technologies Used"
REACT[React.js]
NODE[Node.js]
REDUX[Redux/Thunk/Saga/Toolkit]
EXPRESS[Express.js]
MONGOOSE[Mongoose.js]
end
CE & CRT & CRTK & CLS --> REACT
CRS & CRTH & CSL --> REACT
FSEA & FSEAS & FSJ & FSM --> REACT
FSEA & FSEAS & FSJ & FSM --> REDUX
SE & FSE & FSEA & FSEAS & FSJ & FSM & FSIO --> NODE
SE & FSE & FSEA & FSEAS & FSJ & FSM --> EXPRESS
FSM --> MONGOOSE
- 🚀 Ready-to-use boilerplate templates
- ⚛️ Modern React patterns with Hooks
- 🔄 Multiple state management solutions
- 🌐 Full-stack project examples
- 📦 Various data source integrations
- 🛠️ Built with modern web technologies
- 🎨 SCSS styling and CSS Flexbox/Grid
- 🔌 Real-time communication with Socket.io
- 💾 Database integration examples (MongoDB)
- 📚 Comprehensive examples and documentation
- ⚡ Rapid application development
- 🎓 Perfect for interviews and learning
- � Clean and organized project structure
- 🧪 Experimentation with different state patterns
- Node.js (v14 or higher)
- npm or pnpm
- Basic knowledge of React.js and Node.js
- Clone the repository:
git clone https://github.com/orassayag/starter-kits.git
cd starter-kits-
Choose a starter kit from the
starter-kits/directory -
Navigate to your chosen kit and install dependencies:
cd starter-kits/[kit-name]
npm install- Clone the repository:
git clone https://github.com/orassayag/starter-kits.git
cd starter-kits-
Choose a starter kit from the
starter-kits/directory -
Navigate to your chosen kit and install dependencies:
cd starter-kits/[kit-name]
npm install- Start the development server:
npm startFor detailed setup instructions, see INSTRUCTIONS.md.
Most client kits use Create React App configuration. You can customize:
- Port: Set the
PORTenvironment variable to change the default development port (3000). - API Endpoints: Configure API URLs in the respective service or settings files within each kit.
- Proxy: Some kits include a
proxyfield inpackage.jsonto handle API requests during development.
Server configuration typically includes:
- Port Settings: Default server port is usually 5000, configurable in
src/settings/settings.js. - Database Connections: Configure MongoDB URI in the server settings for database-driven kits.
- API Keys: Add external API keys (like themoviedb) to a
.envfile in the project root.
Select the starter kit that best matches your project requirements (e.g., client-hooks-redux-thunk for a React app with state management).
Follow the installation steps to install dependencies and start the development server.
Explore the code structure and adapt the components, styles, and logic to fit your specific needs. Each kit is designed to be a flexible foundation.
When ready, use the build script to generate a production-ready bundle.
An empty client project with React.js hooks basics - perfect starting point for new React applications.
A movie library application demonstrating React Hooks with Redux Thunk for async operations (themoviedb API).
A movie library application using React Hooks with Redux Toolkit - the modern Redux approach (themoviedb API).
A movie library application with simple hooks and localStorage persistence (themoviedb API).
A movie library application using React class components with Redux Saga for side effects (themoviedb API).
A movie library application using React class components with Redux Thunk (themoviedb API).
A movie library application using React class components with localStorage (themoviedb API).
An empty Node.js server project with Express.js basics.
A full-stack foundation project:
- Client: Empty React.js with hooks
- Server: Node.js with Express.js
A complete movie library application:
- Client: React Hooks + Redux Thunk
- Server: Node.js + Express.js (themoviedb API)
A real-time movie library application:
- Client: React Hooks + Redux Thunk + Socket.io client
- Server: Node.js + Express.js + Socket.io (themoviedb API)
A movie library with simple state management:
- Client: React Hooks + localStorage
- Server: Node.js + Express.js (themoviedb API)
A movie library demonstrating saga patterns:
- Client: React + Redux Saga
- Server: Node.js + Express.js (themoviedb API)
A movie library with classic Redux:
- Client: React + Redux Thunk
- Server: Node.js + Express.js (themoviedb API)
A movie library with basic patterns:
- Client: React + localStorage
- Server: Node.js + Express.js (themoviedb API)
A movie library using local data:
- Client: React Hooks + Redux Thunk
- Server: Node.js + Express.js (local JSON files from themoviedb, from Sources directory)
A movie library with MongoDB:
- Client: React Hooks + Redux Thunk
- Server: Node.js + Express.js + Mongoose (MongoDB with JSON data from themoviedb, from Sources directory)
A WebSocket foundation project:
- Client: Empty React.js with hooks
- Server: Node.js with Socket.io
Demonstrates proper usage of useMemo and useCallback for scroll position management.
Shows how to use useState, useEffect, and useCallback without unnecessary re-renders.
Advanced useRef patterns and best practices.
Proper implementation of React Context API.
Custom context with logic and useState in external files.
Building and using async custom hooks for HTTP requests.
Creating simple, reusable custom hooks.
A full Next.js application simulating meetup events (client and server combined).
starter-kits/
├── src/ # Source code for all kits
│ ├── client-*/ # React client boilerplates
│ ├── server-*/ # Node.js Express boilerplates
│ ├── project-*/ # Full-stack integrated projects
│ └── example-*/ # Focused React pattern examples
├── templates/ # UI snippets and design inspiration
├── Sources/ # Sample data and assets
└── docs/ # Additional documentation
- Container/Presenter: Separation of logic and UI components.
- Higher-Order Components (HOC): Reusable component logic for layouts and authentication.
- Custom Hooks: Abstracting complex logic into reusable functions.
- Redux Patterns: Implementations of Thunk, Saga, and Toolkit for state management.
- Service Layer: Dedicated services for API interactions and data processing.
- Modularity: Each kit is self-contained and easily portable.
- Separation of Concerns: Clear distinction between client-side UI and server-side logic.
- Component-Driven Development: Building UIs with small, testable, and reusable components.
- Scalability: Folder structures designed to grow with project complexity.
- State Management Clarity: Examples of different state management levels based on app needs.
- Start Small: Choose the simplest kit that meets your needs.
- Environment Isolation: Use
.envfiles for all sensitive configuration and API keys. - Component Reusability: Extract common UI elements into the
components/UIdirectory. - Consistent Styling: Leverage SCSS variables and mixins for maintainable styles.
- Hooks Over Classes: Prefer functional components and hooks for new development.
- Type Safety: Consider adding TypeScript to kits for better developer experience.
- Error Boundaries: Implement React Error Boundaries to handle runtime UI failures.
- Performance: Use
useMemoanduseCallbackappropriately to prevent unnecessary re-renders.
starter-kits/
├── starter-kits/ # All starter kits and examples
│ ├── client-*/ # Client-only kits
│ ├── server-*/ # Server-only kits
│ ├── project-*/ # Full-stack projects
│ └── example-*/ # React pattern examples
├── templates/ # HTML and CSS snippets from codepen
├── Sources/ # Data files for specific projects
├── CONTRIBUTING.md # Contribution guidelines
├── INSTRUCTIONS.md # Detailed setup instructions
├── LICENSE # MIT License
└── README.md # This file
- React.js (v17+) - UI library
- React Hooks - Modern React patterns
- Redux - State management
- Redux Thunk - Async middleware
- Redux Saga - Side effects management
- Redux Toolkit - Modern Redux
- React Router - Navigation
- Axios - HTTP client
- SCSS - Styling
- Socket.io Client - Real-time communication
- Node.js - Runtime environment
- Express.js - Web framework
- Mongoose.js - MongoDB ODM
- Socket.io - WebSocket library
- Death - Graceful shutdown
- Create React App - React tooling
- ESLint - Code linting
- Babel - JavaScript transpiler
- Webpack - Module bundler
Movie library data provided by themoviedb.
For projects using local data:
project-server-MONGO-database---client-hooks-redux-thunkproject-server-JSON-files---client-hooks-redux-thunk
Local JSON files are available in the Sources/ directory. Copy the dist folder into the server's src/ directory.
The templates/ directory contains great HTML and CSS snippets from codepen that can be used for UI components or design inspiration.
All React client projects support:
Runs the app in development mode at http://localhost:3000
Launches the test runner in interactive watch mode
Builds the app for production to the build folder
All Node.js server projects support:
Starts the server (typically on http://localhost:5000)
Starts the server in debug mode
Stops the server (Windows only)
- Create React App
- React Documentation
- Redux Documentation
- Express.js Documentation
- Socket.io Documentation
These starter kits are perfect for:
- 📝 Job interview coding tasks
- 🎓 Learning React and Node.js
- 🚀 Starting new projects quickly
- 🧪 Experimenting with different state management solutions
- 📚 Teaching web development concepts
- 🔧 Prototyping applications
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
Everyone is welcome to contribute. Contributing doesn't just mean submitting pull requests—there are many different ways to get involved, including answering questions and reporting issues.
Please feel free to contact me with any question, comment, pull-request, issue, or any other thing you have in mind.
For questions, issues, or contributions:
- GitHub Issues: https://github.com/orassayag/starter-kits/issues
- Email: orassayag@gmail.com
- Discussion: Start a discussion in the repository for architectural advice.
- Or Assayag - Initial work - orassayag
- Or Assayag orassayag@gmail.com
- GitHub: https://github.com/orassayag
- StackOverflow: https://stackoverflow.com/users/4442606/or-assayag?tab=profile
- LinkedIn: https://linkedin.com/in/orassayag
This application has an MIT license - see the LICENSE file for details.
- Built for educational and research purposes
- Respects robots.txt and implements rate limiting
- Uses user-agent rotation to avoid detection
- Implements polite crawling practices