Welcome to OdinMonoWebApps, a collection of web-based projects. Crafted with React, TypeScript, and Redux, as part of the educational journey with The Odin Project, a leading open-source coding curriculum.
Here are the projects, ranked from the most interesting to simplest ones:
| Number | Project | Live Preview | Code | Requirements |
|---|---|---|---|---|
| 1. | 🌦️ Weather App | Live Preview | Code | Weather App Requirements |
| 2. | 📝 Todo List | Live Preview | Code | Todo List Requirements |
| 3. | 🧮 Calculator | Live Preview | Code | Calculator Requirements |
| 4. | 📚 Library | Live Preview | Code | Library Requirements |
| 5. | ❌⭕ Tic Tac Toe | Live Preview | Code | Tic Tac Toe Requirements |
| 6. | 🎨 Etch-a-Sketch | Live Preview | Code | Etch-a-Sketch Requirements |
| 7. | ✍️ Sign-up Form | Live Preview | Code | Sign-up Form Requirements |
| 8. | 🥁 DrumKit | Live Preview | Code | DrumKit Requirements |
| 9. | 🖥️ Admin Dashboard | Live Preview | Code | Admin Dashboard Requirements |
| 10. | ✊✋✌️ Rock Paper Scissors | Live Preview | Code | Rock Paper Scissors Requirements |
| 11. | 🚀 Landing Page | Live Preview | Code | Landing Page Requirements |
| 12. | 🍽️ Restaurant Landing | Live Preview | Code | Restaurant Landing Requirements |
| 13. | 🍳 Recipes Landing | Live Preview | Code | Recipes Landing Requirements |
The repository is thoughtfully organized for easy navigation and development:
📂media: Contains all media files, including GIFs for each project.📂public: Holds public assets, including HTML and favicon.📂src: The source directory.📂assets: All static assets like images and sounds for projects.📂components: Individual project directories with their components.📂redux: Redux setup, including actions and reducers.
To dive into these projects:
- Clone the Repository:
git clone https://github.com/itkrivoshei/OdinMonoWebApps.git
- Navigate to the App Directory:
cd OdinMonoWebApps - Install Dependencies:
npm install
- Launch the Projects:
npm start
- Prettier: Enforces consistent code formatting (
.prettierrc). - ESLint: Enhances code quality (
eslint-config-prettier). - TypeScript: Strong typing with
tsconfig.json. - Scripts:
start: Development server.build: Production build.test: Test suite.pretty: Formats code.lint: Code linting.deploy: Deploys to GitHub Pages.eject: Custom build configuration.
- Prettier (
.prettierrc): Code formatting rules. - TypeScript (
tsconfig.json): Compiler options. - ESLint (
.eslintrc.json): Linting rules.
Eager to contribute? Fantastic! Please follow our Contribution Guidelines for a smooth collaboration process.
OdinMonoWebApps is open-source, licensed under the MIT License. Check out the LICENSE file for more details.