#javascript #reactjs #redux #master-in-software-engineering

Redux Pill

In this project, we learned how to set up the Redux library into a ReactJS project, save a global state into it and use its middlewares to perform async actions.

To achieve this goal, we implemented a real state portal with the functionality of search and filtering properties.

Index

• Redux Pill
  • Getting Started
    • The repository
    • Installing
    • Running the server
  • Deployment
  • Project Requirements
  • Contents and Branches Naming Strategy
  • Packages used
  • Technologies used
  • Resources
  • Contributors ✨

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system (if it applies to this project/pill).

The repository

First, you will need to clone or fork the repository into your Github account:

$ git clone https://github.com/bbenalia/redux-pill.git

Installing

First, you will need to install the dependencies with: npm install

$ npm install

Running the server

In order to use the project, the json server must first be started with the following command:

$ npm run server

Then, you have to start react with the command provided by Create React App.

$ npm start

Deployment

For this project you can use Netlify and Heroku to deploy the front and backend apps.

Project Requirements

• You must use React Router for the routing of the App
• On the home page, you must save the search field into Redux so you can retrieve it later when going to the filtering page.
• For asynchronous calls to the backend API, you should use the Redux Thunk library.
• All the code, including comments, needs to be written in English
• You must use semantic HTML5 elements for all the contents of the application, main, section, form, input types, etc

Contents and Branches Naming Strategy

The branches follow a naming strategy like the following:

• main: includes the main product

• F/<number>: a feature implementation branch

• B/<number>: a bug fix branch

Packages used

• Material UI
• Bootstrap
• Unicons
• Json Server
• Axios
• Sass

Technologies used

* HTML

* CSS

* JS

* ReactJS

* Redux

* Redux Thunk

* LocalStorage

Resources

This section include all the main resources that the students should check.

Here are some examples of resources:

• Getting Started with React
• Getting Started with Redux
• Redux fundamentals
• Redux thunk
• Debounce

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Nacho Montoya 💻 🎨 🤔 📆

bbenalia 💻 🎨 🤔 📆

This project follows the all-contributors specification. Contributions of any kind welcome!