Welcome to the DevFoundry repository — a curated collection of machine coding challenges designed to help developers build, learn, and showcase their skills across stacks. Whether you're just starting out or refining your craft, these projects offer hands-on experience with real-world UI workflows and full-stack architecture.
Each project includes a live demo and demonstrates best practices in modular design, responsive UI, and modern tooling.
DevFoundry is a developer-focused showcase of machine coding projects, originally built with React.js and now evolving toward a stack-neutral, contributor-friendly platform. These projects highlight key concepts like component modularity, state management, API integration, and responsive design.
The backend is powered by a RESTful API built with Node.js and Express.js, enabling full-stack functionality and real-time data workflows. As the platform grows, DevFoundry aims to support multiple tech stacks and foster a vibrant community of builders and learners.
- React.js – JavaScript library for building dynamic user interfaces
- HTML & CSS – For structure and styling
- TailwindCSS – Utility-first CSS framework for rapid UI development
- Vite – Fast build tool and development server
- Redux Toolkit – State management with simplified configuration
- Node.js – JavaScript runtime environment
- Express.js – Web framework for building RESTful APIs
- Mongoose – ODM library for MongoDB
- MongoDB – NoSQL database for storing project data
DevFoundry hosts a growing collection of hands-on machine coding projects originally built with React.js, now evolving to support multiple stacks. Each project includes source code and live demos, offering developers a practical way to explore UI workflows, modular architecture, and real-world problem solving.
Whether you're refining your frontend skills or contributing full-stack features, these projects are designed to help you forge your craft through experience.
/DEVFOUNDRY
├── public/
│ └── images/
├── src/ # Source code
│ ├── components/ # Reusable UI components
│ │ ├── modal/
│ │ ├── skeleton/
│ ├── features/ # Feature-based modules
│ │ ├── google-auth/
│ │ ├── http-get-request/
│ │ ├── http-post-request/
│ │ ├── image-generation/
│ │ ├── redux-counter/
│ │ └── todo-list/
│ ├── hooks/ # Custom React hooks
│ ├── layout/ # Layout components
│ │ ├── Body.jsx
│ │ ├── Layout.jsx
│ ├── routes/
│ │ └── appRouter.jsx # App routing configuration
│ ├── services/ # API service layer
│ ├── store/ # Redux store
│ └── utils/ # Utility functions and style constants
├── .env # Environment variables
├── index.html # Root HTML file
├── index.css # Global CSS file
└── index.jsx # Entry point for React app
└── README.md # Project documentationBefore getting started with the Practicing Projects, you should have a basic understanding of React.js, JavaScript, HTML, CSS and TailwindCSS.
You need to write the following commands on the terminal screen (in vscode) so that you can run this project locally.
git clone "https://github.com/chetannada/DevFoundry-Backend.git"Go to the project directory
cd DevFoundryInstall dependencies
npm installSet up environment variables:
- .env - environment variables for this project to run in development environment (fill with actual values for environment variables)
Run the application:
npm run devThis application should now be running on http://localhost:3000.
If you want to Fork repository and want to run locally, follow this guidelines Fork and Clone Github Repository
This is an Open-Source repository, and contributions are always welcome! If you find an issue, please create a new issue under the "Issues" section. To contribute code, fork the repository and submit a pull request. Your contributions will help make this a valuable resource for the community!
Thanks goes to these wonderful people (emoji key):
 Chetan Nada 💻 🔣 🖋 🎨 📖 👀 🐛 🤔 🚧 🔬 |
 Sankalp Haritash 💻 🔬 🔣 |
 Kaushik Teraiya 💻 🔬 🔣 👀 |
 Om J Patel. 💻 🤔 🔬 |
This project follows the all-contributors specification. Contributions of any kind are welcome!
