You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+23-10Lines changed: 23 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,15 +2,17 @@
2
2
3
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
4
5
-
## Instructions
5
+
## Introduction
6
6
7
7
**Read these instructions carefully. Understand exactly what is expected _before_ starting this project.**
8
8
9
9
### Commits
10
10
11
11
Commit your code regularly and meaningfully. This helps both you and your team lead in case you ever need to return to old code for any number of reasons.
12
12
13
-
## Project Set Up
13
+
## Instructions
14
+
15
+
### Task 1: Project Set Up
14
16
15
17
-[ ] Create a forked copy of this project.
16
18
-[ ] Add your team lead as collaborator on Github.
@@ -27,52 +29,63 @@ Follow these steps for completing your project.
27
29
-[ ] Your team lead will count the project as complete by merging the branch back into master.
28
30
-[ ] Do your magic!
29
31
30
-
## Minimum Viable Product
32
+
### Task 2a: Minimum Viable Product
31
33
32
34
-[ ] Fetch data from the Github API for a Github user
33
35
-[ ] Display the user data on the DOM
34
36
-[ ] Use class components when you need to hold any state or use any lifecycle methods
35
37
36
-
## Planning your App
38
+
####Planning your App
37
39
38
40
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
41
40
42
Also, since you have used the Github API before, you know some of the gotchas. Make sure to plan and watch for those.
41
43
42
44
When you have those completed, you're ready to start coding!
43
45
44
-
##STEP 1 - Fetch the User Data
46
+
####Fetch the User Data
45
47
46
48
- When your component mounts, send a GET request to the following URL (replacing the palceholder with your Github name):
47
49
-https://api.github.com/users/<yourname>
48
50
- After you fetch your data, set it to state
49
51
50
-
##STEP 2 - Display the User Data
52
+
####Display the User Data
51
53
52
54
- Pass the data to the component that will be displaying it
53
55
- Build out a user card using the data that the Github API returns to you
54
56
- You may reference your old project for this, or you may wish to build this from scratch yourself
55
57
56
-
##STEP 3 - Fetch the User's Followers
58
+
####Fetch the User's Followers
57
59
58
60
- When your component mounts, you will also fetch the user's followers using this endpoint:
59
61
https://api.github.com/users/< Your github name >/followers
60
62
- Set that data to state as well, and display the data in your app
61
63
62
-
##STEP 4 - Style the User Card
64
+
####Style the User Card
63
65
64
66
- Now it's time to style up your app
65
67
- You are free to choose how you style your app, but make it look as presentable as you can
66
68
- 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
69
68
-
##STEP 5 - Project Retrospective
70
+
####Project Retrospective
69
71
70
72
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
73
72
-
## Stretch Problems
74
+
### Task 2b: Exit Ticket
75
+
76
+
Once you begin, you will have 15 minutes to answer the questions [here](https://app.codesignal.com/public-test/z2P39aAiiwdSM7XHu/LLXYAwYAzh6FXK).
77
+
78
+
The completion of these questions is mandatory for MVP. However, passing the quiz doesn't affect your standing as a Lambda School student whatsoever. This is Lambda School testing itself! Please answer honestly and to the best of your ability without using external references.
79
+
80
+
### Task 3: Stretch Problems
73
81
74
82
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
83
76
84
- 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
85
78
86
- 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
87
+
88
+
## Submission Format
89
+
90
+
*[ ] Submit a Pull-Request to merge `<firstName-lastName>` Branch into `main` (student's Repo). **Please don't merge your own pull request**
91
+
*[ ] Fill out your module retrospective form [here](https://forms.lambdaschool.com/module-retrospective) with a link to your PR
0 commit comments