Loading repository data…
Loading repository data…
FelipeSSac / repository
React application for Marvel's content, you can login with your GitHub username and can take a look at the 3 different sliders about heroes, movies and HQs
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
This project was developed using the following technologies:
React application for Marvel's content, you can login with your GitHub username and receive a token from JSONWebToken, you can check out the 3 different sliders about heroes, movies and comics, on every slider item you can check where the hero appears or where the movie and comic it's available, you can also logout from the application dropping the token clicking in "Sair".
Project developed using the React library to make it a Single Page Application, which guarantees the best performance when running directly in the client's browser, Create React Application tool to configure the environment, TypeScript as the language to guarantee props and state values accordingly as expected from the contract, JSONWebToken as the token handler stored in the Local Storage, which allows user to access the application with no need to login one more time, Redux as the global context state management, Styled Components to avoid unnecessary and conflicting component styles, Testing Library and Jest for testing to ensure quality assurance on components and events, Atomic Design as the design pattern to promote clean maintenance and good coding practices according to ESLint and EditorConfig.
Project Architecture based on Atomic Design.
src
├──@types
├──assets
│ ├──fonts
│ ├──images
│ └──styles
├──components
│ ├──Atom
│ ├──Molecule
│ └──Organism
├──helpers
│ ├──ensurers
│ ├──handlers
│ └──hooks
├──pages
├──resources
│ └──data
├──routes
├──store
│ └──actions
└──utils
Component
├──Component.tsx
├──Component.test.tsx
├──styles.ts
└──index.ts
Redux was used to guarantee the data from user's GitHub on every component, save the token, login and logout the user.
On the Login page by checking 'Save login', you choose to store the token in Local Storage. In Redux Initial State we get the token from Local Storage, if it doesn't exist you can login again or for the first time, once private routes checks the token directly from Redux.
InitialState = { token: ${localStorage.getItem()}, user: { githubUserImage:https://github.com/${githubUser}.png`,
githubUser,
},
}
`
You can access the redux actions on folder src/store/actions.
Unit test coverage was 64.94%, with 24 cases from 10 test suites.
Clone this repository.
# Run to install dependencies.
$ yarn
# Run to start the project on `localhost:3000`.
$ yarn start
Clone this repository.
# Run to install dependencies.
$ yarn
# Run to test all suited tests.
$ yarn test
# Run to test all suited tests and get their coverage.
$ yarn coverage
Clone this repository.
# Run to install dependencies.
$ yarn
# Run to start building the project.
$ yarn build
# Builded project it´s now available at folder `root/build`