Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spudmashmedia/spudmash-hack-randomuser-nextjs
Random User(s) with NextJS + React
https://github.com/spudmashmedia/spudmash-hack-randomuser-nextjs
jest nextjs reactjs storybook
Last synced: 29 days ago
JSON representation
Random User(s) with NextJS + React
- Host: GitHub
- URL: https://github.com/spudmashmedia/spudmash-hack-randomuser-nextjs
- Owner: spudmashmedia
- License: mit
- Created: 2020-03-07T11:48:43.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T15:46:32.000Z (about 2 years ago)
- Last Synced: 2024-11-16T04:39:08.168Z (3 months ago)
- Topics: jest, nextjs, reactjs, storybook
- Language: JavaScript
- Homepage:
- Size: 15.3 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Random User(s) with NextJS + React
A Next + React SPA app that demonstrates:
- NextJS + React usage
- Next SWR
- React-Spring
- Integration with randomuser.me/api
- Material UI components
- Jest Unit + Snapshot tests
- Babel setup
- Storybook Component testing (w/ a11y testing)
- Multistage Docker builds
## Prerequisite
Please have the following installed:
| Ref | Url |
| ---------------------------- | ------------------------------------------------------- |
| Node LTS (use nvm) Linux/Mac | https://github.com/nvm-sh/nvm/releases. |
| Node LTS (use nvm) Windows | https://github.com/coreybutler/nvm-windows/releases |
| yarn | https://classic.yarnpkg.com/en/docs/install/#mac-stable |
| docker | https://docs.docker.com/install/ |
NOTE: for Windows users, please use a terminal that supports Linux commands. Here are a few
| App | Url|
|---| ---|
|Cmder | https://cmder.net/|
|Windows Subsystem|https://docs.microsoft.com/en-us/windows/wsl/install-win10|
## Getting Started
After cloning, run:
```
yarn install
```
To run the development server:
```
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Build + Deployment
A dockerfile is included, run:
```
sh build.sh
```
OR
```
docker build -t randomusernextjs .
docker run -p 3000:80 -d randomusernextjs
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Run Tests
Using Jest testing framework.
This will fire off
- unit tests
- snapshot tests
- TODO: integration test
```
yarn test
```
## Open Storybook Component Library
Storybook Component Library + the a11y addon is activated for accessibility testing.
```
yarn storybook
```
## References
| Ref | Url |
| ---------------------------- | ----------------------------------------------------------------- |
| Node LTS (use nvm) Linux/Mac | https://github.com/nvm-sh/nvm/releases. |
| Node LTS (use nvm) Windows | https://github.com/coreybutler/nvm-windows/releases |
| yarn | https://classic.yarnpkg.com/en/docs/install/#mac-stable |
| docker | https://docs.docker.com/install/ |
| NextJS | https://nextjs.org/ |
| SWR remote data fetching | https://github.com/zeit/swr |
| ReactJS | https://reactjs.org/ |
| Material UI React Components | https://material-ui.com/ |
| React Spring | https://www.react-spring.io/docs/hooks/use-spring |
| Storybook | https://storybook.js.org/ |
| Storybook a11y addon | https://github.com/storybookjs/storybook/tree/master/addons/a11y |
| Storybook knobs addon | https://github.com/storybookjs/storybook/tree/master/addons/knobs |
| Docker multistage | https://docs.docker.com/develop/develop-images/multistage-build/ |
|Cmder | https://cmder.net/|
|Windows Subsystem|https://docs.microsoft.com/en-us/windows/wsl/install-win10|