Code Monkey home page Code Monkey logo

claudiarojassoto / metricks_tracker Goto Github PK

View Code? Open in Web Editor NEW
22.0 2.0 0.0 1.6 MB

Welcome to Metricks Tracker, a mobile web app using React and Redux! Explore a selected API, monitor, and obtain information effortlessly! Metricks Tracker focuses primarily on the world population to offer a detailed and meaningful analysis of data related to this area.

License: Other

HTML 7.42% CSS 14.91% JavaScript 77.67%
actions components events props react react-life-cycle react-redux reducers router state

metricks_tracker's Introduction


Metrics Tracker

๐Ÿ“— Table of Contents

๐Ÿ“– Metrics Tracker

Welcome to Metricks Tracker, a mobile web app using React and Redux! Explore a selected API, monitor, and obtain information effortlessly! Metricks Tracker focuses primarily on the world population to offer a detailed and meaningful analysis of data related to this area. With Metricks Tracker, you will have access to valuable and up-to-date information about the world population, enabling you to make informed decisions and gain a clearer understanding of demographic patterns and trends. Start using Metricks Tracker now and discover a world of statistical information at your fingertips!. Here is the link to the video presentation

๐Ÿ›  Built With

Tech Stack

React-redux
HTML
CSS
  • The CSS is used to provide the design in the whole page.
Linters
  • The Linters are tools that help us to check and solve the errors in the code
  • This project count with two linters:
    • CSS
    • JavaScript

Key Features

  • SPA
  • CRA
  • Styles
  • Router
  • Logged
  • Toolkit
  • React-Redux
  • Jest & React Test Library
  • Deployment

(back to top)

๐Ÿš€ Live Demo

You can see a Demo here.

(back to top)

๐Ÿ’ป Getting Started

To get a local copy up and running, follow these steps. This project requires Node.js and npm installed on your machine.

-Node.js -npm

-Clone this repository to your local machine using:

git clone https://github.com/ClaudiaRojasSoto/Metricks_Tracker.git

-Navigate to the project folder:

cd math_magicians

-Install the project dependencies:

npm install

To start the development server, run the following command:

npm start

Project Structure

The project follows the following folder and file structure:

  • /src: Contains the source files of the application.
  • /src/index.js: Main entry point of the JavaScript application.
  • /src/App.js: Top-level component of the application where components are rendered.
  • /src/components: Directory for React components.
  • /src/components/HomePage.js: Component for the home page.
  • /src/components/HomePage.test.js: Tests for the home page.
  • /src/components/HomePage.css: Styles for the home page.
  • /src/components/navbar: Folder for the navigation bar components.
  • /src/components/navbar/Navbar.js: Component for the navigation bar.
  • /src/components/navbar/Navbar.test.js: Tests for the navigation bar.
  • /src/components/navbar/Navbar.css: Styles for the navigation bar.
  • /src/components/details: Folder for the details components.
  • /src/components/details/Details.js: Component for the details.
  • /src/components/details/Details.test.js: Tests for the details.
  • /src/components/details/Details.css: Styles for the details.
  • /src/components/countries: Folder for the countries components.
  • /src/components/countries/Countries.js: Component for the countries.
  • /src/components/countries/Countries.test.js: Tests for the countries.
  • /src/components/countries/Countries.css: Styles for the countries.
  • /src/imagesContinents: Contains the folder of images of continents.
  • /src/imagesContinents/continents: Folder with images of continents.
  • /src/redux: Directory for Redux management.
  • /src/redux/store.js: Redux store configuration.
  • /src/redux/actions: Folder for Redux actions.
  • /src/redux/actions/worldActions.js: Actions for world management.
  • /src/redux/actions/worldActions.test.js: Tests for world actions.
  • /src/redux/actions/countriesActions.js: Actions for countries management.
  • /src/redux/actions/countriesActions.test.js: Tests for countries actions.
  • /src/redux/actions/continentsActions.js: Actions for continents management.
  • /src/redux/actions/continentsActions.test.js: Tests for continents actions.
  • /src/redux/reducers: Folder for Redux reducers.
  • /src/redux/reducers/rootReducer.js: Root reducer for the application.
  • /src/redux/reducers/worldReducer.js: Reducer for world management.
  • /src/redux/reducers/countriesReducer.js: Reducer for countries management.
  • /src/redux/reducers/continentsReducer.js: Reducer for continents management.
  • /src/redux/reducers/*.test.js: Tests for the reducers.
  • /public: Contains the public files and assets of the application.
  • /public/index.html: Base HTML file of the application.
  • /build: Contains the generated production files.

Setup

Clone this repository to your desired folder: https://github.com/ClaudiaRojasSoto/Metricks_Tracker.git

Install

Install this project with: install Stylelint and ESLint

Usage

To run the project, execute the following command: just need a web Browser

Run tests

To run tests, run the following command: npm start you just need a simple web browser to run this project for a test

๐Ÿ‘ฅ Authors

๐Ÿ‘ค Claudia Rojas

(back to top)

๐Ÿ”ญ Future Features

  • User keys - login

(back to top)

๐Ÿค Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

โญ๏ธ Show your support

If you like this project show support by following this account

(back to top)

๐Ÿ™ Acknowledgments

  • Microverse for providing the opportunity to learn Git and GitHub in a collaborative environment.
  • GitHub Docs for providing a wealth of information on Git and GitHub.
  • Creative Commons for providing the design of this work.
  • You can click on the link to see the original design:
  • original design on Behance.
  • Nelson Sakwa in Behance, for her original design idea.
  • You can click on the link to see the Nelson Sakwa profile on Behance.
  • Nelson Sakwa profile on Behance

(back to top)

๐Ÿ“ License

This project is MIT.

(back to top)

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.