Skip to content

Commit ce4b57a

Browse files
new instructions.
1 parent 51ed32d commit ce4b57a

File tree

5 files changed

+57
-75
lines changed

5 files changed

+57
-75
lines changed

README.md

Lines changed: 57 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,66 @@
1-
# Module Project: Component Lifecycle Methods - React Github User Card
1+
# Component Lifecycle Methods - React Github User Card
22

33
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.
44

5-
## Introduction
65

7-
**Read these instructions carefully. Understand exactly what is expected _before_ starting this project.**
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.
818

9-
### Commits
19+
<!-- ![Project Example](project-goals.gif) -->
1020

11-
Commit your code regularly and meaningfully. This helps you and any collaborators in case you ever need to return to old code for any number of reasons.
21+
***Make sure to complete your tasks one at a time and complete test each task before proceding forward.***
1222

1323
## Instructions
14-
1524
### Task 1: Project Set Up
16-
17-
- [ ] Create a forked copy of this project.
18-
- [ ] Clone your OWN version of the repository in your terminal
19-
- [ ] Use CRA to create a new React app in this repository
20-
- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
21-
- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
22-
- [ ] Push commits: git push origin `<firstName-lastName>`.
23-
24-
Follow these steps for completing your project.
25-
26-
- [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into main (student's Repository). **Please don't merge your own pull request**
27-
- [ ] From the home page of your repo, make sure you have your branch selected
28-
- [ ] Copy the URL and paste it into Canvas
29-
30-
### Task 2: Minimum Viable Product
31-
32-
- [ ] Fetch data from the Github API for a Github user
33-
- [ ] Display the user data on the DOM
34-
- [ ] Use class components when you need to hold any state or use any lifecycle methods
35-
36-
#### Planning your App
37-
38-
This is an important step for any project you will be working on. You will want to plan out what data you will need, which component will manage that data via state, what functions you may need to update that state, and where you need to pass the data to render it to the DOM. I love to use pen and paper or a whiteboard for this. The visuals can help a lot when you're deep into your code. After I finish that, I will write out a list of steps that I think it will take to build the app. This gives me a starting point, and direction as I proceed. This list always changes a bit as you are building, but it should give you a good flow and some good anchor points.
39-
40-
Also, since you have used the Github API before, you know some of the gotchas. Make sure to plan and watch for those.
41-
42-
When you have those completed, you're ready to start coding!
43-
44-
#### Fetch the User Data
45-
46-
- When your component mounts, send a GET request to the following URL (replacing the palceholder with your Github name):
47-
- https://api.github.com/users/< your github name >
48-
- After you fetch your data, set it to state
49-
50-
#### Display the User Data
51-
52-
- Pass the data to the component that will be displaying it
53-
- Build out a user card using the data that the Github API returns to you
54-
- You may reference your old project for this, or you may wish to build this from scratch yourself
55-
56-
#### Fetch the User's Followers
57-
58-
- When your component mounts, you will also fetch the user's followers using this endpoint:
59-
https://api.github.com/users/< Your github name >/followers
60-
- Set that data to state as well, and display the data in your app
61-
62-
#### Style the User Card
63-
64-
- Now it's time to style up your app
65-
- You are free to choose how you style your app, but make it look as presentable as you can
66-
- Try something new here. Maybe that's a new CSS technique you haven't really practiced yet. Maybe it's using a styling library you haven't tried. Push yourself to get better in this area.
67-
68-
#### Project Retrospective
69-
70-
Now that you have completed the MVP, I want you to think about the process it took you to get here. Is there anything you wish you had planned better? Anything you would do differently? Now take a minute think about how you would accomplish these same objectives with function components and hooks. You have experience with both formats now, so you can form opinions, but more importantly, you can back up those opinions. That's a really exciting level to be at! If you have time now, go ahead and move onto the stretch problems.
71-
72-
### Task 3: Stretch Problems
73-
74-
After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals:
75-
76-
- Build a form that allows you to search for different Github users. When the form is submitted, use `componentDidUpdate` to fetch the data for the user you typed in. Set that new user's data to state to trigger the component to rerender and display your new user. Don't forget to fetch their followers as well.
77-
78-
- Look into adding your GitHub contribution graph. There are a number of different ways of doing this, this Stack Overflow discussion will get you started: https://stackoverflow.com/questions/34516592/embed-github-contributions-graph-in-website
79-
80-
## Submission Format
81-
82-
- [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into `main` (student's Repository). **Please don't merge your own pull request**
83-
- [ ] From the home page of your repo, make sure you have your branch selected
84-
- [ ] Copy the URL and paste it into Canvas to submit your project
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+
* [ ] Take a look at the data returned when using endpoint: 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+
50+
#### Load in the user and follower on mount
51+
> *We can now do our api call to get our initial data*
52+
* [ ] Make our user object and follower list state empty by default.
53+
* [ ] Keep our searched user state your github username by default.
54+
* [ ] Use componentDidMount to load initial user data for your github name into state.
55+
* [ ] 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.***
56+
57+
#### Build search capabilities within your APP
58+
> *Now let's allow users to search for new github usernames*
59+
* [ ] Connect your form in App.js so that typing into a input updated your current user state.
60+
* [ ] When your form is submitted, make an api call on current user. Set the returned user data to state.
61+
* [ ] Ensure that followers is correctly updated.
62+
63+
### Task 3: Stretch goals
64+
- [ ] We are making several api calls of the same type in our code. How can we make this portion more dry?
65+
- [ ] Add in functionality so that when a follower is clicked, they will become the searched user. Have the UI update approprately.
66+
- [ ] Push your styling! Have fun!

card_ mockup.png

532 KB
Loading

src/components/Follower.js

Whitespace-only changes.

src/components/FollowerList.js

Whitespace-only changes.

src/components/User.js

Whitespace-only changes.

0 commit comments

Comments
 (0)