Capstone SPA project using React, Redux, API for the stocks market.

Overview

Stocks Market SPA React-Redux Capstone project

Capstone SPA project using React, Redux and API for the stocks market. Displaying stocks market information about the most traded US stocks and detailed info for the selected stock symbol.

App snapshots

Short video presentation

Short presentation

Mini Demo

Live Demo

Live demo

Description

This React capstone project is about building a mobile web application to check a list of metrics (numeric values) that you will create making use of React and Redux. Select an API that provides numeric data about a topic that you like and then build the webapp around it. The webapp will have several pages:

  • one page with a list of items that could be filtered by some parameters; in the example below, it's a list of metrics that can be filtered by the country (imagine a search field to introduce the country name like Italy, Croatia, etc.). This page should be your homepage.
  • one page for the item details; in the example, the detail page for Czech Republic cities with number of views.

screenshot

Built With

  • Major languages: Javascript
  • Frameworks: React.js, Redux
  • Technologies used: Node.js, Babel, webpack
  • Tested with: - ESLint (JavaScript linting), Stylelint (style linting) Jest, React Testing Library

Prerequisites

  • Internet connection and browser
  • A text editor(preferably Visual Studio Code)
  • Browser

Setup

Install

Usage

  • Clone the repository using git clone https://github.com/Hombre2014/Stocks-market
  • Change directory into the project folder: cd stocks-market
  • Run npm install
  • Run npm start
  • A new browser will open automatically with application loaded

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Deployment

Using Netlify.

Author

👤 Yuriy Chamkoriyski

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

The Creative Commons license of the design requires appropriate credit to the author. Original design idea by Nelson Sakwa on Behance.

📝 License

This project is MIT licensed.

You might also like...
Full React && Redux project builded as a group project where user can reserved rockets and missions from SpaceX API

Full React && Redux project builded as a group project where user can reserved rockets and missions from SpaceX API. This data will be updated and displayed in the profile section of the page

☁️ Application using Redux, Redux-Saga, react-redux-toastr, React-Select, Immer, styled-components, customize-cra, react-app-rewired and consuming the features of the Node.js - SaaS API
☁️ Application using Redux, Redux-Saga, react-redux-toastr, React-Select, Immer, styled-components, customize-cra, react-app-rewired and consuming the features of the Node.js - SaaS API

☁️ Application using Redux, Redux-Saga, react-redux-toastr, React-Select, Immer, styled-components, customize-cra, react-app-rewired and consuming the features of the Node.js - SaaS API

flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

A test project light weight youtube viewer using Youtube API, React, Redux, Typescript
A test project light weight youtube viewer using Youtube API, React, Redux, Typescript

This is a test project light weight youtube viewer using Youtube API, React, Redux, Typescript Technologies Project is created with: React: 18.1.0 Rea

React-spa-portfolio is a react portfolio build with React, SASS and includes futures like carousal

React-spa-portfolio is a react portfolio build with React, SASS and includes futures like carousal (build with pure react no library), tabs, and others.

A React SPA with react-router page navigation and add functionality through json-server endpoints
A React SPA with react-router page navigation and add functionality through json-server endpoints

A React SPA with react-router page navigation and add functionality through json-server endpoints. A custom useFetch hook includes methods for getting and posting data. Search functionality with URLQueryParams. Context Providers allow for theme selection and Reducers for dark/light mode toggling.

React SPA App with Serverless Backend and Congito Auth Demo
React SPA App with Serverless Backend and Congito Auth Demo

React SPA App with Serverless Backend and Congito Auth Demo Overview This samples shows how to make a SPA application with serverless backend by AWS C

Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes
Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Math magicians is a Single Page App (SPA), based on react, that allows users to make simple calculations and read random math-related quotes. Built mainly with REACTJS

Math magicians is a Single Page App (SPA), based on react, that allows users to make simple calculations and read random math-related quotes. Built mainly with REACTJS

Comments
  • Dev

    Dev

    This is the final PR for this project. All the requirements listed here have been implemented. Since I am using API from Finage.co.uk web site, for some of the stock there might be missing information and my app will not be able to display it. For most of the stocks listed the information is complete.

    Requirements:

    API

    API First you need to choose an API to base the development of the webapp on. The API should allow you to get numeric values based on a parameter. We recommend that you choose an API that is open or needs an API key. If you choose an API that require authentication, you should implement it on your own.

    Design

    • [x] You should follow these design guidelines, including:
      • [x] Colors (select one main color for your website).
      • [x] Typography: font face, size and weight.
      • [x] Layout: composition and space between elements.

    Interactions

    • [x] Home page
      • [x] When the page loads, the web app shows the list of categories that could be filtered out by some parameter, for example by the category name.
      • [x] Along with the category name, you will display some numeric values per category that come from the API.
      • [x] When the user clicks (or taps) on a category item, the application navigates to the details page.
    • [x] Details page
      • [x] In the details page, the web app retrieves data from the API to show detailed data in the category.
      • [x] When the user clicks on the "Back" button (<), the user navigates to the home page.

    Testing requirements

    • [x] Create unit tests for pure functions in your Redux code.
    • [x] Create integration tests for your application using the React Testing Library.
      • [x] You may need to mock the access to the API, so that your tests don't send actual requests.
      • [x] You may need to mock the connection to the Redux Store.

    Technical requirements

    • [x] The project is a single page application (SPA) built with React and Redux.
    • [x] The data retrieved from the API should be stored in the Redux store.
    • [x] You should filter the data that you retrieve from the API using a Filter stateless component.
    • [x] Every page (the main page and the pages for each item) should have a unique route within the SPA.
    • [x] The project should be deployed and accessible online (add a link to the online version of your app to your README file).

    Project documentation

    Once you have finished the development of the project, you should record a video presenting the features of the project you built. It is a video with a maximum length of 5 minutes. The content of the video should include:

    • [x] a description of the project.
    • [x] a demo of the project features.
    • [x] you should also highlight some interesting piece of code or something you built that you are very proud of.
    opened by Hombre2014 3
Owner
Yuriy Chamkoriyski
Student at Microverse Full-stack web development program. Experience in front-end: HTML5, CSS3, JavaScript and WordPress. I am looking for the right opportunity
Yuriy Chamkoriyski
React & Redux group capstone project (M3W4).

Space Traveller React & Redux group capstone project. This project is done on module 3, week 4 of the Microverse full-stack development program. Requi

Behnam Aghaali 3 Jun 23, 2022
Stock metrics an app that allows you to display active stocks of companies built with react and redux

Stock metrics is an app that allows you to display active stocks of companies ,and you can see I ncome statement of past 5years by selecting a selected company.It is built with react and redux .

mugisha Samuel 4 Dec 22, 2022
A website designed to showcase the US stock market, Built using React, Redux, SASS, and tested using React testing library

Market Overview is a website designed to showcase the US stock market. You could find details about the stock of choice and improve your strategies. Built using React, Redux, SASS, and tested using React testing library.

Carlos HerverSolano 4 Mar 23, 2022
Application made with React that shows the most current Movies on the market

Movies themoviedb Application made with create-react-app that shows the most current Movies on the market using the api themoviedb Technologies used T

Johnnie Lopez 1 Nov 16, 2021
Crypto-Expence-Tracker: keep an eye on the top trends on the market, crypto prices, and all their details

The crypto is a capstone built with React/redux, SASS, and the coinbase API. It helps them to keep an eye on the top trends on the market, crypto prices, and all their details.

Kandy Peter Kamuntu 8 Dec 3, 2022
A responsive mobile-based SPA web application built using React, Redux, Chart.js, API, JavaScript, JSX, and CSS

This is a responsive mobile-based SPA web application built using React, Redux, Chart.js, API, JavaScript, JSX, and CSS. It provides numerical data of a crypto coin fetched from the API. It has three pages, the home page with a list of coins, the details page with details of a coin, and the historical data page for visualizing the coin market price in the graph.

Kidist D. Guta 4 Oct 30, 2022
Notes taking Project uses Python (Django, REST API) + React (SPA Frontend) + Docker (Compose).

Notes taking website. Try it! / But how to run? Description This is monorepository with notes website, with API and Frontend servers. Website provides

Kirill Zhosul 2 Jul 27, 2022
Completed React & Redux project, releated to a single page app (SPA)

Completed React & Redux project, releated to a single page app (SPA), were you can find information of the most popular crypto coins in the market using coingecko API. Including a search bar for filtering the crypto coin you want to match.

Nicolas Gonzalez 10 Dec 15, 2022
Mintok is an SPA app built with React and Redux (Redux ToolKit)

This project is a SPA app built with React and Redux (Redux ToolKit) that provides market-based information and statistics about cryptocurrency. The application fetches the data about the coins from the CoinLore API and allows users to check, discover and search (constantly updated) statistics about the top 100 currencies in the market.

Karla Delgado 4 Sep 16, 2022
This project I created with Rodrigo Branas in the live about the micro frontends. For this presentation I used single-spa.js, vue.js and react on different micro frontends

live-microfrontends-with-branas Micro Frontend with Rodrigo Branas This project I created with Rodrigo Branas in the live about the micro frontends. F

Carlos Augusto Sempe Junior 10 Dec 11, 2022