Skip to content

Commit b64ddae

Browse files
wlongmireBloomTechwlongmireBloomTech
committed
initial commit.
0 parents  commit b64ddae

17 files changed

+14732
-0
lines changed

‎.eslintrc.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true,
5+
"node": true,
6+
"jest": true
7+
},
8+
"extends": [
9+
"eslint:recommended",
10+
"plugin:react/recommended"
11+
],
12+
"parserOptions": {
13+
"ecmaFeatures": {
14+
"jsx": true
15+
},
16+
"ecmaVersion": 12,
17+
"sourceType": "module"
18+
},
19+
"plugins": [
20+
"react"
21+
],
22+
"rules": {
23+
}
24+
}

‎.gitignore‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# Snowpack dependency directory (https://snowpack.dev/)
45+
web_modules/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Microbundle cache
57+
.rpt2_cache/
58+
.rts2_cache_cjs/
59+
.rts2_cache_es/
60+
.rts2_cache_umd/
61+
62+
# Optional REPL history
63+
.node_repl_history
64+
65+
# Output of 'npm pack'
66+
*.tgz
67+
68+
# Yarn Integrity file
69+
.yarn-integrity
70+
71+
# dotenv environment variables file
72+
.env
73+
.env.test
74+
75+
# parcel-bundler cache (https://parceljs.org/)
76+
.cache
77+
.parcel-cache
78+
79+
# Next.js build output
80+
.next
81+
out
82+
83+
# Nuxt.js build / generate output
84+
.nuxt
85+
dist
86+
87+
# Gatsby files
88+
.cache/
89+
# Comment in the public line in if your project uses Gatsby and not Next.js
90+
# https://nextjs.org/blog/next-9-1#public-directory-support
91+
# public
92+
93+
# vuepress build output
94+
.vuepress/dist
95+
96+
# Serverless directories
97+
.serverless/
98+
99+
# FuseBox cache
100+
.fusebox/
101+
102+
# DynamoDB Local files
103+
.dynamodb/
104+
105+
# TernJS port file
106+
.tern-port
107+
108+
# Stores VSCode versions used for testing VSCode extensions
109+
.vscode-test
110+
111+
# yarn v2
112+
.yarn/cache
113+
.yarn/unplugged
114+
.yarn/build-state.yml
115+
.yarn/install-state.gz
116+
.pnp.*
117+
118+
.DS_Store
119+
.vscode
120+
# Logs
121+
logs
122+
*.log
123+
npm-debug.log*
124+
yarn-debug.log*
125+
yarn-error.log*
126+
lerna-debug.log*
127+
.pnpm-debug.log*
128+
129+
# Diagnostic reports (https://nodejs.org/api/report.html)
130+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
131+
132+
# Runtime data
133+
pids
134+
*.pid
135+
*.seed
136+
*.pid.lock
137+
138+
# Directory for instrumented libs generated by jscoverage/JSCover
139+
lib-cov
140+
141+
# Coverage directory used by tools like istanbul
142+
coverage
143+
*.lcov
144+
145+
# nyc test coverage
146+
.nyc_output
147+
148+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
149+
.grunt
150+
151+
# Bower dependency directory (https://bower.io/)
152+
bower_components
153+
154+
# node-waf configuration
155+
.lock-wscript
156+
157+
# Compiled binary addons (https://nodejs.org/api/addons.html)
158+
build/Release
159+
160+
# Dependency directories
161+
node_modules/
162+
jspm_packages/
163+
164+
# Snowpack dependency directory (https://snowpack.dev/)
165+
web_modules/
166+
167+
# TypeScript cache
168+
*.tsbuildinfo
169+
170+
# Optional npm cache directory
171+
.npm
172+
173+
# Optional eslint cache
174+
.eslintcache
175+
176+
# Microbundle cache
177+
.rpt2_cache/
178+
.rts2_cache_cjs/
179+
.rts2_cache_es/
180+
.rts2_cache_umd/
181+
182+
# Optional REPL history
183+
.node_repl_history
184+
185+
# Output of 'npm pack'
186+
*.tgz
187+
188+
# Yarn Integrity file
189+
.yarn-integrity
190+
191+
# dotenv environment variables file
192+
.env
193+
.env.test
194+
.env.production
195+
196+
# parcel-bundler cache (https://parceljs.org/)
197+
.cache
198+
.parcel-cache
199+
200+
# Next.js build output
201+
.next
202+
out
203+
204+
# Nuxt.js build / generate output
205+
.nuxt
206+
dist
207+
208+
# Gatsby files
209+
.cache/
210+
# Comment in the public line in if your project uses Gatsby and not Next.js
211+
# https://nextjs.org/blog/next-9-1#public-directory-support
212+
# public
213+
214+
# vuepress build output
215+
.vuepress/dist
216+
217+
# Serverless directories
218+
.serverless/
219+
220+
# FuseBox cache
221+
.fusebox/
222+
223+
# DynamoDB Local files
224+
.dynamodb/
225+
226+
# TernJS port file
227+
.tern-port
228+
229+
# Stores VSCode versions used for testing VSCode extensions
230+
.vscode-test
231+
232+
# yarn v2
233+
.yarn/cache
234+
.yarn/unplugged
235+
.yarn/build-state.yml
236+
.yarn/install-state.gz
237+
.pnp.*

‎README.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Component Lifecycle Methods - React Github User Card
2+
3+
This project allows you to practice the concepts and techniques learned in this module and apply them in a concrete project. This module explored lifecycle methods in class components. In your project you will demonstrate proficiency of these concepts by recreating the Github User Card project, but as a React application this time.
4+
5+
6+
## Objectives
7+
- Build class components from scratch from a Storyboard
8+
- Get comfortable creating multiple slices of state
9+
- Use ComponentDidMount to make an API call
10+
- Use ComponentDidUpdate to make an API call
11+
12+
## Introduction
13+
In this project you will build an application that allows for github user and follower information to be retrieved and displayed within custom made DOM. You application should do the following:
14+
- Hold both the current user, user and follower state within the App.js component.
15+
- Load the current user state into the user state on mount.
16+
- Load the current user's followers into state when the current user state is updated.
17+
- Load the the user and follower information of the username typed into a form when submitted.
18+
19+
<!-- ![Project Example](project-goals.gif) -->
20+
21+
***Make sure to complete your tasks one at a time and complete test each task before proceding forward.***
22+
23+
## Instructions
24+
### Task 1: Project Set Up
25+
* [ ] Create a forked copy of this project.
26+
* [ ] Clone your OWN version of the repository in your terminal
27+
* [ ] cd into the project base directory `cd web-module-project-lifecycle`
28+
* [ ] Download project dependencies by running `npm install`
29+
* [ ] Start up the app using `npm start`
30+
31+
### Task 2: Project Requirements
32+
#### Build your DOM
33+
> *Creating the DOM for your application base on your template and data*
34+
* [ ] Take a look at the [included mockup](./card_mockup.png).
35+
* [ ] Use your browser to take a look at the data returned when using the following endpoints: https://api.github.com/users/<Your github name> and https://api.github.com/users/<Your github name>/followers
36+
* [ ] Using these three pieces of information, build the DOM necessary to display all application information.
37+
* [ ] Make use of the User.js (for holding all user information), FollowerList.js (for map through a followers list) and Follower.js (for displaying an individual follower) components to efficiently distribute your code. ***All components should be class based for this assignment.***
38+
* [ ] Feel free to leave the search form within App.js.
39+
* [ ] Lightly style as needed.
40+
* [ ] Commit all changes before proceeding.
41+
42+
#### Add in your state
43+
> *Now that we have all the DOM necessary to run our application, let's proceed to building in our state*
44+
* [ ] In App.js, add in state. Include a slice for state for:
45+
- A string defining the user we are currently searching for
46+
- An object containing all user information
47+
- The array of all followers
48+
* [ ] Using our two github endpoints as a base, add your github user name, as well as test data for the user object and followers array to insure it is connected correctly.
49+
* [ ] Connect make sure that the test data within state correct displays within your User, FollowerList and Follower components.
50+
51+
#### Load in the user and follower on mount
52+
> *We can now do our api calls to get our initial data*
53+
* [ ] Make our user object and follower list state empty by default.
54+
* [ ] Keep our searched user state your github username by default.
55+
* [ ] Use componentDidMount to load initial user data for your github name into state.
56+
* [ ] Use componentDidUpdate to load follower information ***only when the user slice of state changes value. Make be careful to avoid infinite loops while building this portion.***
57+
58+
#### Build search capabilities within your APP
59+
> *Now let's allow users to search for new github usernames*
60+
* [ ] Connect your form in App.js so that typing into a input updated your current user state.
61+
* [ ] When your form is submitted, make an api call on current user. Set the returned user data to state.
62+
* [ ] Ensure that followers is correctly updated.
63+
64+
### Task 3: Stretch goals
65+
- [ ] We are making several api calls of the same type in our code. How can we make this portion more dry?
66+
- [ ] Add in functionality so that when a follower is clicked, they will become the searched user. Have the UI update approprately.
67+
- [ ] Push your styling! Have fun!

‎babel.config.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
env: {
3+
testing: { // matches the `NODE_ENV=testing` in "test" script in package.json
4+
plugins: [
5+
'@babel/plugin-transform-runtime',
6+
],
7+
presets: [
8+
['@babel/preset-react'],
9+
[
10+
'@babel/preset-env',
11+
{
12+
modules: 'commonjs',
13+
debug: false
14+
}
15+
]
16+
]
17+
}
18+
}
19+
};

‎card_ mockup.png‎

532 KB
Loading

0 commit comments

Comments
 (0)