Welcome to the Frontend Playground! 🎨 This repository is a collection of projects and experiments aimed at learning and mastering React, Tailwind CSS, Figma and JavaScript.
- Tailwind CSS with Figma - in Progress
- Tailwind CSS SandBox
- Tailwind CSS Projects
- Javascript Mastery
- React Projects
The repository is organized into the following directories:
frontend-playground/
├── javascript-mastery/ # Hands-on Javascript
├── tailwind-css-sandbox/ # Hands-on Tailwind CSS experiments and small projects
├── tailwind-css-projects/ # Larger projects showcasing Tailwind CSS in action
├── react-projects # React Projects based on JavaScript
├── react-typescript-projects # React Projects based on TypeScrpt
├── .github/workflows/ # CI/CD workflows for deployment
This folder contains the CI/CD configuration files for deploying projects. Each project has been set up to deploy its static assets (like index.html and related files) to GitHub Pages.
This folder contains small, focused experiments with Tailwind CSS, such as trying out utility classes, transitions, and layouts. Ideal for quick prototypes or testing new ideas.
This folder is for larger projects built with Tailwind CSS. These projects are more structured and aim to demonstrate real-world use cases of Tailwind CSS in modern web development.
| # | Project | Live Demo | Deployment Platform |
|---|---|---|---|
| 01 | Email Subscribe | Live Demo | GitHub Pages |
| 02 | Pricing Grids | Live Demo | GitHub Pages |
| 03 | Product Modal | Live Demo | GitHub Pages |
| 04 | Image Gallery | Live Demo | GitHub Pages |
| 05 | Login Modal | Live Demo | GitHub Pages |
| 06 | ClipBoard | Live Demo | Netlify |
| 07 | LoopStudio | Live Demo | Vercel |
| 08 | TinyURL | Live Demo | Vercel |
| 09 | TestMonial-Grid | Live Demo | Vercel |
| 10 | Fylo | Live Demo | Vercel |
| 11 | Bookmark | Live Demo | Vercel |
Explore key concepts such as Promises, Generators, Async/Await, Type Coercion,** Data Structures**, the Module System, and NPM. This section also introduces the basics of Express JS and React JS for building dynamic, modern applications.
Most of the projects are planned for deployment on Vercel, which provides a convenient platform for hosting frontend websites. For more advanced projects that require frequent interaction or backend-focused services, deployment will be handled via AWS CloudFront or AWS Elastic Beanstalk.
| Project Name | Live Demo | Source Code | Deployment Platform | Status |
|---|---|---|---|---|
| 01 - Birthday Reminder | Live Demo | Source Code | Vercel | ✅ Done |
| 02 - Tours | Live Demo | Source Code | Vercel | ✅ Done |
| 03 - Reviews | Live Demo | Source Code | Vercel | ✅ Done |
| 04 - Accordion | Live Demo | Source Code | Vercel | ✅ Done |
| 05 - Menu | Live Demo | Source Code | Vercel | ✅ Done |
| 06 - Tabs | Live Demo | Source Code | Vercel | ✅ Done |
| 07 - Slider | Live Demo | Source Code | Vercel | ✅ Done |
| 08 - Lorem Ipsum | Live Demo | Source Code | Vercel | ✅ Done |
| 09 - Color Generator | Live Demo | Source Code | Vercel | ✅ Done |
| 10 - Grocery Bud | Live Demo | Source Code | Vercel | ✅ Done |
| 11 - Navbar | Live Demo | Source Code | Vercel | ✅ Done |
| 12 - Sidebar & Modal | Live Demo | Source Code | Vercel | ✅ Done |
| 13 - Stripe Submenus | Live Demo | Source Code | Vercel | ✅ Done |
| 14 - Cart | Live Demo | Source Code | Vercel | ✅ Done |
| 15 - Cocktails | Live Demo | Source Code | Vercel | ✅ Done |
| 16 - Markdown Preview | Live Demo | Source Code | Vercel | ✅ Done |
| 17 - Random Person | Live Demo | Source Code | Vercel | ✅ Done |
| 18 - Pagination | Live Demo | Source Code | Vercel | ✅ Done |
| 19 - Stock Photos | Live Demo | Source Code | Vercel | ✅ Done |
| 20 - Dark Mode | Live Demo | Source Code | Vercel | ✅ Done |
| 21 - Movie DB | Live Demo | Source Code | Vercel | ✅ Done |
| 22 - Hacker News | Live Demo | Source Code | Vercel | ✅ Done |
| 23 - Quiz | Live Demo | Source Code | Vercel | ✅ Done |
-
Basic: Learn how to convert Figma designs into responsive, pixel-perfect UIs using Tailwind CSS. This section focuses on streamlining the design-to-code workflow, making it easier to build clean, organized frontend layouts without complex CSS.
-
Advanced: Take it further with Builder.io, using AI to generate clean, responsive code from Figma designs in real-time. No setup required—convert designs to React, Next.js, Vue, Svelte, Angular, and more, with your preferred styling library like Tailwind CSS, CSS Modules, or Styled Components. The generated code is automatically responsive, easy to read, and integrates seamlessly with existing projects.
- EPICWEB Video
- Youtube Vide
- Github Source Code
- Course Figma
- Builder.IO
- Builder.IO Youtube
- Builder.IO Figma
The primary goals of this repository are:
- Learn Tailwind CSS: Explore the utility-first approach of styling with Tailwind and master its features.
- Improve JavaScript Skills: Build interactive components and dynamic functionalities.
- Dive into React: Begin experimenting with React to build reusable components and stateful applications.
- Clone this repository:
git clone https://github.com/Rurutia1027/frontend-playground.git cd frontend-playground - Explore the subfolders to view individual projects.
- For tailwind-css-sandbox: Open index.html in your browser or deploy via GitHub Pages.
- For tailwind-css-projects: Follow any specific instructions in the folder’s README (if available).
- To contribute, fork the repo, create a branch, and submit a pull request.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- JavaScript: The foundation of interactive web applications.
- React: A library for building user interfaces (future additions).
Happy coding! 🚀