Skip to content

Commit b2d6af9

Browse files
author
Yoko Saka
authored
Merge pull request #1 from yocosaka/feature/movies
React Capstone Project: Catalogue of Movies
2 parents 69cf97b + 1be847c commit b2d6af9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+44752
-1
lines changed

‎.eslintrc.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"jest": true
6+
},
7+
"parser": "babel-eslint",
8+
"parserOptions": {
9+
"ecmaFeatures": {
10+
"jsx": true
11+
},
12+
"ecmaVersion": 2018,
13+
"sourceType": "module"
14+
},
15+
"extends": ["airbnb", "plugin:react/recommended"],
16+
"plugins": ["react"],
17+
"rules": {
18+
"react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
19+
"react/react-in-jsx-scope": "off",
20+
"import/no-unresolved": "off",
21+
"no-shadow": "off"
22+
},
23+
"ignorePatterns": [
24+
"dist/",
25+
"build/"
26+
]
27+
}

‎.github/workflows/linters.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: Linters
2+
3+
on: pull_request
4+
5+
env:
6+
FORCE_COLOR: 1
7+
8+
jobs:
9+
eslint:
10+
name: ESLint
11+
runs-on: ubuntu-18.04
12+
steps:
13+
- uses: actions/checkout@v2
14+
- uses: actions/setup-node@v1
15+
with:
16+
node-version: "12.x"
17+
- name: Setup ESLint
18+
run: |
19+
npm install --save-dev eslint@7.11.x eslint-config-airbnb@18.1.x eslint-plugin-import@2.22.x eslint-plugin-jsx-a11y@6.2.x eslint-plugin-react@7.20.x eslint-plugin-react-hooks@2.5.x babel-eslint@10.1.x
20+
[ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.eslintrc.json
21+
- name: ESLint Report
22+
run: npx eslint .
23+
stylelint:
24+
name: Stylelint
25+
runs-on: ubuntu-18.04
26+
steps:
27+
- uses: actions/checkout@v2
28+
- uses: actions/setup-node@v1
29+
with:
30+
node-version: "12.x"
31+
- name: Setup Stylelint
32+
run: |
33+
npm install --save-dev stylelint@13.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x stylelint-csstree-validator
34+
[ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.stylelintrc.json
35+
- name: Stylelint Report
36+
# run: npx stylelint "**/*.{css,scss}"
37+
run: npx stylelint "**/*.scss"

‎.gitignore‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
26+
# For Mac ----------------------------------------------------------->>
27+
# General
28+
.AppleDouble
29+
.LSOverride
30+
31+
# Icon must end with two \r
32+
Icon
33+
34+
# Thumbnails
35+
._*
36+
37+
# Files that might appear in the root of a volume
38+
.DocumentRevisions-V100
39+
.fseventsd
40+
.Spotlight-V100
41+
.TemporaryItems
42+
.Trashes
43+
.VolumeIcon.icns
44+
.com.apple.timemachine.donotpresent
45+
46+
# Directories potentially created on remote AFP share
47+
.AppleDB
48+
.AppleDesktop
49+
Network Trash Folder
50+
Temporary Items
51+
.apdisk
52+
53+
# Custom ----------------------------------------------------------->>
54+
.vscode/
55+
.env
56+
/memo
57+
/stashes

‎.stylelintrc.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": ["stylelint-config-standard"],
3+
"plugins": ["stylelint-scss", "stylelint-csstree-validator"],
4+
"rules": {
5+
"at-rule-no-unknown": null,
6+
"scss/at-rule-no-unknown": true,
7+
"csstree/validator": true
8+
},
9+
"ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"]
10+
}

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Yoko Saka
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,109 @@
1-
# Catalogue-of-Recipes
1+
![](https://img.shields.io/badge/Microverse-blueviolet)
2+
# Catalogue of Movies with React & Redux
3+
4+
**Search Result**
5+
![Search Result Screenshot](./screenshot-1.png)
6+
7+
**Movie Detail**
8+
![Detail Page Screenshot](./screenshot-2.png)
9+
10+
11+
## About the Project
12+
13+
This project was built as a React & Redux Capstone project at Microverse.
14+
It is based on the idea of a "Catalogue of Recipes" which is a single-page application with React and Redux.
15+
16+
It shows a browsable list of movies that users can filter and access to the details of each movie. Every page, the main page, and pages for each item have a unique route within the Single Page Application, SPA.
17+
18+
I deployed this app to Heroku, so it’s accessible online.
19+
The data is retrieved from the Open Movie Database, [OMDb API](https://www.omdbapi.com/).
20+
With this API, this app fetches the list data of movies based on the user’s input.
21+
And the retrieved data is stored in the Redux store.
22+
23+
Also, it retrieves the particular movie data by searching a unique id in the background and update the data in the Redux store only when the unique id matches the data of the store.
24+
25+
This web app has 3 types of pages:
26+
27+
- one page with a list of items that could be filtered by some parameters
28+
In this project, it’s a list of movies that can be filtered by the title and the year of the movie.
29+
30+
- one page for the item details
31+
In this project, it’s the movie detail page.
32+
33+
- one page for not found
34+
If users input the wrong path directly, the app shows the 404 page.
35+
36+
A list of commonly used resources that I find helpful is listed in the acknowledgments.
37+
38+
39+
## Built With
40+
41+
* [React](https://reactjs.org/)
42+
* [Redux](https://redux.js.org/)
43+
* [JavaScript](https://en.wikipedia.org/wiki/JavaScript)
44+
* [HTML5](https://en.wikipedia.org/wiki/HTML5)
45+
* [SASS](https://sass-lang.com/)
46+
47+
48+
## Live Demo
49+
50+
[Live Demo Link](https://catalogue-of-movies-yoko.herokuapp.com/)
51+
52+
53+
## Video Description
54+
55+
[Video description for this project](https://youtu.be/eg_REpJqK8Q)
56+
57+
58+
## Getting Started
59+
60+
To get a local copy up and running follow these simple example steps.
61+
62+
1. On the project GitHub page, navigate to the main page of the repository.
63+
2. Under the repository name, locate and click on a green button named `Code`.
64+
3. Copy the project URL as displayed.
65+
4. If you're running the Windows Operating System, open your command prompt. On Linux, Open your terminal.
66+
5. Change the current working directory to the location where you want the cloned directory to be made. Leave as it is if the current location is where you want the project to be.
67+
6. Type git clone, and then paste the URL you copied in Step 3. <br>
68+
e.g. $ git clone https://github.com/yourUsername/yourProjectName
69+
7. Press Enter. Your local copy will be created.
70+
8. To run the server in your local environment, run `npm start`
71+
9. To run the tests, run `npm test`
72+
73+
## Author
74+
75+
👤 **Yoko Saka**
76+
77+
- GitHub: [@yocosaka](https://github.com/yocosaka)
78+
- Twitter: [@yocosaka](https://twitter.com/yocosaka)
79+
- LinkedIn: [Yoko Saka](https://www.linkedin.com/in/yokosaka)
80+
81+
82+
## Contributing
83+
84+
Contributions, issues, and feature requests are welcome!
85+
Feel free to check the [issues page](../../issues).
86+
87+
1. Fork the Project
88+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
89+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
90+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
91+
5. Open a Pull Request
92+
93+
94+
## Show your support
95+
96+
Give a ⭐️ if you like this project!
97+
98+
99+
## License
100+
101+
This project is [MIT](./LICENSE) licensed.
102+
103+
104+
## Acknowledgements
105+
* [Prop Types](https://www.npmjs.com/package/prop-types)
106+
* [Heroku](https://dashboard.heroku.com/)
107+
* [iconify](https://iconify.design/icon-sets/)
108+
* [Pixabay](https://pixabay.com/)
109+
* [OMDb API](https://www.omdbapi.com/)

0 commit comments

Comments
 (0)