https://github.com/jdmiguel/address_book_app

Address app book development with tools such as React, React-router, Redux, Axios and Scss
https://github.com/jdmiguel/address_book_app

axios babel eslint jest prettier react react-router react-testing-library redux scss webpack yarn

Last synced: 29 days ago
JSON representation

Address app book development with tools such as React, React-router, Redux, Axios and Scss

• Host: GitHub
• URL: https://github.com/jdmiguel/address_book_app
• Owner: jdmiguel
• Created: 2020-08-07T10:57:01.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-15T10:12:18.000Z (over 4 years ago)
• Last Synced: 2024-11-07T12:48:43.250Z (3 months ago)
• Topics: axios, babel, eslint, jest, prettier, react, react-router, react-testing-library, redux, scss, webpack, yarn
• Language: JavaScript
• Homepage:
• Size: 1.15 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
## ADDRESS BOOK APP

### TECHNOLOGIES

- **YARN**

- **WEBPACK**

- **ESLINT**

- **PRETTIER**

- **BABEL**

- **REACT HOOKS**

- **REACT-ROUTER**

- **REACT-MODAL**

- **REDUX**

- **AXIOS**

- **SCSS**

- **JEST**

- **REACT-TESTING-LIBRARY**

### SETUP

* **clone repo**: In your folder, open a new terminal and clone the repo

* **install dependencies**: Execute *yarn*

* **run local server**: Execute *yarn start*

* **create production files**: Execute *yarn build*

* **run test suites**: Execute *yarn test*

### DEVELOPMENT

First, I created my own scaffolding by adding Webpack, Eslint, Prettier and Babel files. As package manager I used Yarn.

This app was developed with React, React-router, React-modal Redux, Axios. SCSS was used to style the application.

The source files are in src folder that is composed of following folders:

* **assets**: Images and html generator (.ejs)

* **components**: App components organized by the following folders:

    * **core**: Presentational components related to UI elements

    * **hooks**: Custom hook components

    * **layout**: Presentational components related to the layout of the application

    * **pages**: Container components related to the pages of the application

- **scss**: Styles of application with the same structure as components folder by adding a utils folder with vars, mixins, etc...

- **services**: Api requests

- **store**: Global state by implementing reducers, actions and actionTypes

- **utils**: Supporting constants and models

Finally, Github was used in order to handle this repository. I worked with different branches regarding the required tasks and when these ones were ready I merged the metioned branches to master branch by using Pull Requests.

### TESTING

I added unit tests to Layout and Core components with Jest and React-testing-library.