Code Monkey home page Code Monkey logo

andresmatax / react-course Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 8.36 MB

This repository has several projects that help developers learn and improve their skills in modern web applications. It uses React, Redux, external APIs and automatic tests with Jest. Each project is designed to teach key concepts in a practical and realistic way. It is a progressive learning experience with useful applications.

JavaScript 30.06% HTML 2.09% TypeScript 65.33% CSS 2.52%

react-course's Introduction

React Course Projects

๐Ÿ“š Descriptions

Project #1 | 03-counter-app-vite

Description

The project is a simple web application that allows users to increment or decrement a counter and see its value updated on screen. The main goal of this project is to provide a clear and concise example of how to build a basic React application and how to write automated tests using the Jest testing framework.

Project #2 | 04-giff-app

Description

The project is a web application that allows users to search for GIFs based on their search queries. It uses the Giphy API to get search results in real time and display the corresponding GIFs on the screen. The main objective of this project is to demonstrate how to build an interactive interface using React, how to integrate an external API (Giphy) and how to perform automatic tests to ensure the proper functioning of the application.

Project #3 | 05-hook-app

Description

The project is a complete web application that serves as a learning and practice platform for all React Hooks. In addition, automatic tests will be implemented using Jest to guarantee the correct functioning of the Hooks and components in the application. The main goal of this project is to provide a central place to explore and practice using each Hook in different situations, while developing a solid understanding of automated testing.

Project #4 | 07-heroes-spa

Description

The project is a single page application (SPA) that allows users to explore and search for information about Marvel and DC Comics heroes. Users will be able to view hero details, compare stats, save favorite heroes, and discover interesting information about their favorite characters. The main goal of this project is to build an interactive experience using React, get hero data from external sources, and ensure code quality with automated testing using Jest.

Project #5 | 08-journal-app

Description

The project is a web application that allows users to create journal notes, save titles, descriptions, and even images associated with each entry. The app uses Firebase as the backend platform to store and manage the notes in the Firestore, and Jest is used to write automated tests that ensure the integrity and functionality of the app.

Project #6 | 09-toolkit-redux-app

Description

The project is a web application that combines two features: a simple counter and the display of information about pokemon obtained from the Poke API. Redux Toolkit will be used to manage the state of the application, and Jest will be used to write automatic tests that ensure the correct operation of both the counter and the integration with the Poke API.

Project #7 | 10-calendar-app

Description

The project is a web application that allows users to create and manage events in an interactive calendar. Users will be able to add events with details such as title, date, time, and description, and will be able to view, modify, and delete existing events. React will be used to build the user interface and Jest will be used to write automatic tests that ensure the correct operation of event handling.

๐ŸŽน Projects installation

  1. Run installation command.
yarn

โš™๏ธ Available commands

  1. Start development server.
yarn dev
  1. Start development tests.
yarn test-dev
  1. Run tests.
yarn test
  1. Run build command.
yarn build
  1. Start production server.
yarn preview

react-course's People

Contributors

andresmatax avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.