Skip to content

Commit 3351294

Browse files
meetrishiguptameetrishigupta
committed
Initial commit
0 parents  commit 3351294

37 files changed

+32240
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.gitignore

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Optional stylelint cache
58+
.stylelintcache
59+
60+
# Microbundle cache
61+
.rpt2_cache/
62+
.rts2_cache_cjs/
63+
.rts2_cache_es/
64+
.rts2_cache_umd/
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
# Yarn Integrity file
73+
.yarn-integrity
74+
75+
# dotenv environment variable files
76+
.env
77+
.env.development.local
78+
.env.test.local
79+
.env.production.local
80+
.env.local
81+
82+
# parcel-bundler cache (https://parceljs.org/)
83+
.cache
84+
.parcel-cache
85+
86+
# Next.js build output
87+
.next
88+
out
89+
90+
# Nuxt.js build / generate output
91+
.nuxt
92+
dist
93+
94+
# Gatsby files
95+
.cache/
96+
# Comment in the public line in if your project uses Gatsby and not Next.js
97+
# https://nextjs.org/blog/next-9-1#public-directory-support
98+
# public
99+
100+
# vuepress build output
101+
.vuepress/dist
102+
103+
# vuepress v2.x temp and cache directory
104+
.temp
105+
.cache
106+
107+
# Serverless directories
108+
.serverless/
109+
110+
# FuseBox cache
111+
.fusebox/
112+
113+
# DynamoDB Local files
114+
.dynamodb/
115+
116+
# TernJS port file
117+
.tern-port
118+
119+
# Stores VSCode versions used for testing VSCode extensions
120+
.vscode-test
121+
122+
# yarn v2
123+
.yarn/cache
124+
.yarn/unplugged
125+
.yarn/build-state.yml
126+
.yarn/install-state.gz
127+
.pnp.*

‎ProblemStatement.md

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
### PhotoFolio is an online photo album react app that allows users to upload, organize, and share their digital photos.
2+
3+
### Steps
4+
5+
##### Use the following guidelines and hints to build the project
6+
7+
- Get all albums in AlbumsList and use it inside the component
8+
- Conditionally render the AlbumForm component
9+
- Add a new album document to firestore when the AlbumForm is submitted
10+
- Conditionally render the AlbumList and ImageList
11+
- Get all images in an album when it is clicked
12+
- Add, update and delete image in the album from firestore when the ImageForm is submitted or delete is clicked
13+
- Add an effect to set default values on the ImageForm inputs when updateIntent is changed
14+
- Add dynamic classes to the buttons
15+
16+
### Hints
17+
18+
- All the uppercase comments are actions that you need to be perform
19+
- The mock implementation between the 'REMOVE MOCK' to 'MOCK END' comments needs to be removed
20+
- Use the solution code and demo video and specific hints and code logic
21+
- The firebase API would look like this:
22+
- /albums to perform CRUD on all albums
23+
- /albums/album_id/images to perform CRUD on images from the album with id album_id
24+
25+
### Evaluation Metrics
26+
27+
##### Your project will be evaluated on the basis of the following criterion:
28+
29+
- Firebase integration for creating, reading, updating and deleting tasks (33%)
30+
31+
- Getting docs from firestore
32+
- Adding docs to firestore
33+
- Updating docs on firestore
34+
- Deleting docs from firestore
35+
- API design and usage
36+
37+
- Replacing mock data and functions with hooks and state (33%)
38+
39+
- Using useState hook to maintain the state
40+
- Using useEffect hook to perform side effects
41+
- Using useRef hook to access input values
42+
- Replacing mock data with state values
43+
44+
- Implementation logic and app functionality (33%)
45+
- Conditionally rendering of forms and components
46+
- Buttons and inputs functionality
47+
- Adding dynamic styles
48+
49+
### Final Project Link
50+
51+
<a href="https://github.com/pranvinit/PhotoFolio" target="_blank">Solution</a>
52+
53+
### Demo Video
54+
55+
<iframe width="900" height="506" src="https://www.youtube.com/embed/BMDTJOSo5Y8" title="PhotoFolio: Firebase Mini Project" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

‎README.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Getting Started with Create React App
2+
3+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4+
5+
## Available Scripts
6+
7+
In the project directory, you can run:
8+
9+
### `npm start`
10+
11+
Runs the app in the development mode.\
12+
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13+
14+
The page will reload when you make changes.\
15+
You may also see any lint errors in the console.
16+
17+
### `npm test`
18+
19+
Launches the test runner in the interactive watch mode.\
20+
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21+
22+
### `npm run build`
23+
24+
Builds the app for production to the `build` folder.\
25+
It correctly bundles React in production mode and optimizes the build for the best performance.
26+
27+
The build is minified and the filenames include the hashes.\
28+
Your app is ready to be deployed!
29+
30+
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31+
32+
### `npm run eject`
33+
34+
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
35+
36+
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37+
38+
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39+
40+
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41+
42+
## Learn More
43+
44+
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45+
46+
To learn React, check out the [React documentation](https://reactjs.org/).
47+
48+
### Code Splitting
49+
50+
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51+
52+
### Analyzing the Bundle Size
53+
54+
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55+
56+
### Making a Progressive Web App
57+
58+
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59+
60+
### Advanced Configuration
61+
62+
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63+
64+
### Deployment
65+
66+
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67+
68+
### `npm run build` fails to minify
69+
70+
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

0 commit comments

Comments
 (0)