Dojo

Dependency-light mini projects for training concepts across JS, TS, and more

A comprehensive collection of web-based mini projects designed to help developers improve their skills in creating modern UIs and implementing clean, efficient code logic. Perfect for beginners and intermediate developers looking to expand their portfolio.

---

📋 Table of Contents

• ✨ Features
• 🎯 Projects
• 🚀 Quick Start
• 💻 Tech Stack
• 📚 Learning Path
• 💡 How to Use
• ➕ Add New Project
• 🤝 Contributing
• 📝 License

---

✨ Features

✅ Beginner-Friendly - Clear code structure and well-documented projects
✅ Real-World Projects - Practical applications you can showcase in your portfolio
✅ Progressive Difficulty - From basic to intermediate level challenges
✅ Modern Technologies - HTML5, CSS3, JavaScript, and TypeScript
✅ Responsive Design - Works perfectly on all devices
✅ Interactive Learning - Learn by building, experimenting, and creating
✅ Well-Organized - Easy navigation and clear project structure
✅ Easy to Extend - Simple process to add new projects

---

🎯 Projects

🎮 Game Projects

#	Project	Type	Difficulty	Status	View
1	Flappy Bird	2D Game	Intermediate	✅	→
2	Tic Tac Toe	Strategy Game	Beginner	✅	→
3	Snake	Classic Game	Intermediate	✅	→
4	Rock Paper Scissors	Casual Game	Beginner	✅	→
5	Guess The Word	Word Game	Intermediate	✅	→
6	Memory Cards Game	Puzzle Game	Beginner	✅	→
7	Ping Pong	Puzzle Game	Beginner	✅	→
8	Physics Sandbox	Simulation	Advance	⏳	→

🎨 UI/UX Projects

#	Project	Type	Difficulty	Status	View
1	Animated Pricing Cards	Component	Intermediate	✅	→
2	Cars Showcase	Gallery	Intermediate	✅	→
3	Gradient Color Generator	Tool	Beginner	✅	→
4	Typing Animation	Effect	Intermediate	✅	→

🔧 Utility Projects

#	Project	Type	Difficulty	Status	View
1	Calculator	Application	Beginner	✅	→
2	Palindrome Checker	Tool	Beginner	✅	→
3	Virtual Piano	Interactive	Intermediate	✅	→
4	Smart Search Playground	Advanced Tool	Advanced	✅	→
5	State And Logic Engine	Logic and State Control	Intermediate	✅	→
6	Virtualized List Engine	DOM Illusion	Intermediate	✅	→
7	Search Query Engine	Engine	Intermediate	✅	→
8	Undo and Redo Engine	Engine	Intermediate	✅	→
9	Command Palette Engine	Engine and UI	Intermediate	✅	→
10	Advance local file system and data management	CLI	Intermediate	✅	→
11	Todo-api	API	Beginner	✅	→
12	Password Generator	Algorithm	Beginner	✅	→
13	Recreative System	System	Intermediate	✅	→
14	Virtual Dom	Algorithm	Intermediate	✅	→
15	Event Emitter	Algorithm	Intermediate	✅	→
16	LRU Cache	Data Structure	Intermediate	✅	→
17	Sliding Window Analyzer	Algorithm	Intermediate	✅	→
18	File System Scanner	Algorithm	Intermediate	✅	→
19	Course Scheduler	Algorithm	Intermediate	✅	→
20	Priority Queue	Algorithm	Intermediate	✅	→
21	Promise Scheduler	Algorithm	Intermediate	✅	→
22	State Machine	Algorithm	Intermediate	✅	→
23	Dependency Injection Container	Algorithm	Intermediate	✅	→
24	Template Engine (AST)	Algorithm	Intermediate	✅	→
25	Advance Template Engine (AST)	Algorithm	Advance	⏳	→
26	Smart Search & Scroll	Algorithm	Advance	✅	→
27	Global Message Bus	Algorithm	Advance	✅	→
28	Form Validation Pipeline	Algorithm	Advance	✅	→
29	Background Image Processor	Algorithm	Advance	✅	→
30	API Response Cache	Algorithm	Advance	✅	→
31	Unified Query Runner	Algorithm	Advance	✅	→
32	Physic Engine	Engine	Advance	⏳	→

⚙️ Deep JavaScript Foundations (the bedrock)

#	Project	Type	Difficulty	Status	View
1	Custom bind/call/apply polyfills	Core concepts	Advance	✅	→
2	Object.create polyfill - Class‑less inheritance	Core concepts	Advance	✅	→
3	Custom Execution Order Visualizer	Core concepts	Advance	✅	→
4	Custom lazy‑evaluation	Core concepts	Advance	✅	→

🛍 Data Structures & Algorithms – Framework Edition

#	Project	Type	Difficulty	Description	Status	View
1	Undo/redo manager	Data Structure	Advance	using a command stack (like a mini‑Redux history)	✅	→
2	Mini-Router	Data Structure	Advance	Mini‑router with path‑to‑component mapping using a trie (nested routes)	✅	→
3	Custom hashmap	Data Structure	Advance	Custom HashMap implementation that mimics JavaScript’s Map (any key type, chain buckets)	✅	→

📌 To add a new project: See ➕ Add New Project section below

---

🚀 Quick Start

Clone the Repository

git clone <Repo URL>
cd web-based-mini-projects

Open a Project

Simply navigate to any project folder and open the index.html file in your browser:

# Example: Open Flappy Bird
cd projects/Flappy-Bird
open index.html  # macOS
# or
start index.html  # Windows

No Installation Required!

Most projects work immediately in your browser. No npm packages or build tools needed! 🎉

---

💻 Tech Stack

• HTML5
• Javascript
• Typescript
• Css
• React
• Next.js
• Motion
• Tailwindcss
• Vite
• Express
• Bun
• Nodejs

---

💡 How to Use

For Learning

1. Pick a project that matches your skill level
2. Read the code to understand the implementation
3. Modify & experiment - Change colors, logic, features
4. Build variations - Create your own version
5. Share your progress - Submit PRs with improvements

For Portfolio

• Showcase projects on your GitHub profile
• Deploy projects using GitHub Pages or Vercel
• Add features and improvements to stand out
• Document your work with detailed README files

Best Practices

// ✅ DO - Write clean, readable code
function calculateSum(numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

// ❌ DON'T - Write unclear code
function calc(n) {
  let s = 0;
  for(let i=0; i<n. length; i++) s+=n[i];
  return s;
}

---

➕ Add New Project

Want to add a new project? Follow this simple process:

Step 1: Create Project Folder

cd projects
mkdir your-project-name
cd your-project-name

Step 2: Create Project Files

# Create basic structure
touch index.html
touch style.css
touch script.js
touch README.md

Step 3: Add Project to README

Update the projects table above by following this format:

For a Game Project:

| # | **Your Project Name** | Game Type | Difficulty | ✅ | [→](projects/your-project-name) |

For a UI/UX Project:

| # | **Your Project Name** | Component Type | Difficulty | ✅ | [→](projects/your-project-name) |

For a Utility Project:

| # | **Your Project Name** | Tool Type | Difficulty | ✅ | [→](projects/your-project-name) |

Difficulty Levels: Beginner | Intermediate | Advanced

Status: Use ✅ for Done, 🔄 for In Progress

Step 4: Add to Learning Path (Optional)

If your project fits a specific difficulty level, add it to the Learning Path section:

### 🟢 Beginner Level
... 
6. **Your Project Name** - Brief description of what they'll learn

Step 5: Create Project README

Create a detailed README.md inside your project folder:

# Your Project Name

> Brief description of the project

## ✨ Features

- Feature 1
- Feature 2

## 📁 Project Structure

\`\`\`text 
your-project-name/
├── index.html
├── style. css
├── script.js
└── README.md
\`\`\`

## 🚀 Quick Start

Open \`index.html\` in your browser. 

## 🎓 What You'll Learn

- Skill 1
- Skill 2

## 🎨 Customization

// Add customization tips

## 📝 License

MIT License
\`\`\`

### Step 6: Submit Pull Request

```bash
git add .
git commit -m "feat: Add Your Project Name"
git push origin feature/your-project-name

Then open a Pull Request with details about your project!

---

🎓 What You'll Learn

• 🎯 DOM Manipulation - JavaScript & the browser API
• 🎨 CSS Animations - Smooth transitions & effects
• 🎮 Game Development - Logic, physics, collision detection
• 📱 Responsive Design - Mobile-first approach
• 🔄 State Management - Managing application state
• ⚡ Performance Optimization - Efficient code practices
• 🧪 Debugging Skills - Finding and fixing issues
• 📋 Code Organization - Clean architecture patterns
• 💻 Tools - Cli usefull tools built with Node.js

---

🤝 Contributing

We welcome contributions from the community! Help us grow this collection.

How to Contribute

1. Fork this repository
2. Create a feature branch

   git checkout -b feature/new-project

3. Add or improve projects
   • Follow existing code structure
   • Write clean, commented code
   • Include a detailed README for new projects
   • Update main README with project entry
4. Commit your changes

   git commit -m "feat: Add New Project Name"

5. Push to the branch

   git push origin feature/new-project

6. Open a Pull Request
   • Describe your changes clearly
   • Reference any related issues
   • Include before/after screenshots if applicable

Contribution Guidelines

✅ Code Quality - Write clean, well-commented code
✅ Documentation - Add READMEs for new projects
✅ Responsiveness - Ensure projects work on all devices
✅ Browser Support - Test on modern browsers
✅ Performance - Optimize assets and code
✅ Update README - Add project to main README tables
✅ Learning Value - Ensure project teaches valuable skills

📖 Full Contribution Guide →

---

🌟 Star History

If this repository helped you learn and improve your skills, please consider giving it a ⭐!

Your support motivates us to add more projects and improve existing ones.

---

📝 License

This project is open source and available under the MIT License.

You are free to use these projects for learning, personal projects, and portfolio building.

---

🔗 Links

• 📦 Repository
• 👤 Author - arxja
• 🌐 All Projects

---

Made with ❤️ by arxja

Helping developers master web development, one project at a time 🚀

⬆ Back to top