71 | ```
72 | ## 10. Pull Request
73 | To create a pull request that is ready for review, click Create Pull Request. For more information about creating pull requests, see “About pull requests.”
74 | ### 
75 | ### 
76 | ### 👍 Hurrah! You are all set to contribute to the Open Source Community
77 | 
78 | ## ⚡️⚡️⚡️⚡️ Enjoy Contributing
79 |
--------------------------------------------------------------------------------
/src/styles/result.module.css:
--------------------------------------------------------------------------------
1 | .cardContainer {
2 | height: 200px;
3 | margin-top: 50px;
4 | cursor: pointer;
5 | }
6 |
7 | .iconContainer {
8 | position: relative;
9 | width: 120px;
10 | height: 120px;
11 | }
12 |
13 | .icon {
14 | position: relative;
15 | top: 40px;
16 | left: 40px;
17 | border-radius: 50%;
18 | opacity: 1;
19 | z-index: 9;
20 | }
21 |
22 | .contentContainer {
23 | height: 100%;
24 | padding: 20px 0px 20px 90px;
25 | border-radius: 20px;
26 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
27 | }
28 |
29 | .pathExpand {
30 | text-align: center;
31 | font-size: 30px;
32 | line-height: 150px;
33 | -moz-transition: all 0.2s linear;
34 | -webkit-transition: all 0.2s linear;
35 | transition: all 0.2s linear;
36 | }
37 |
38 | .expandRotate {
39 | -moz-transform: rotate(180deg);
40 | -webkit-transform: rotate(180deg);
41 | transform: rotate(180deg);
42 | }
43 |
44 | .footstepsContainer {
45 | display: flex;
46 | flex-wrap: nowrap;
47 | overflow-x: auto;
48 | margin: 10px 50px;
49 | opacity: 1;
50 | box-sizing: border-box;
51 | transition: height 200ms 0ms, opacity 200ms 200ms;
52 | height: 500px;
53 | }
54 |
55 | .footstepsContainer::-webkit-scrollbar {
56 | display: none;
57 | }
58 |
59 | .footstepsHide {
60 | transition: height 200ms 200ms, opacity 200ms 0ms;
61 | opacity: 0;
62 | height: 0px;
63 | }
64 |
65 | .pathDescription {
66 | position: relative;
67 | height: 160px;
68 | }
69 |
70 | .pathDescription h1 {
71 | font-weight: 600;
72 | }
73 |
74 | .pathInfo {
75 | width: 100%;
76 | display: flex;
77 | justify-content: space-between;
78 | position: absolute;
79 | bottom: 0px;
80 | }
81 |
82 | .pathInfo p {
83 | margin-bottom: 0;
84 | font-size: 16px;
85 | font-family: "Montserrat", sans-serif;
86 | }
87 |
88 | .pathInfo p span {
89 | font-weight: 700;
90 | }
91 |
92 | .mobCardContainer {
93 | display: none;
94 | }
95 |
96 | .resultPath {
97 | margin-top: 50px;
98 | }
99 |
100 | .resultPath h1 {
101 | font-weight: 700;
102 | }
103 |
104 | .resultFootsteps {
105 | margin-top: 80px;
106 | }
107 |
108 | .resultFootsteps h1 {
109 | font-weight: 700;
110 | }
111 |
112 | .noResults {
113 | margin: 80px 0;
114 | text-align: center;
115 | font-size: 30px;
116 | color: black;
117 | font-weight: 700;
118 | font-family: "Montserrat", sans-serif;
119 | }
120 |
121 | .filterCard {
122 | height: 50px;
123 | width: 220px;
124 | background: white;
125 | display: flex;
126 | justify-content: space-between;
127 | align-items: center;
128 | padding: 10px;
129 | border-radius: 5px;
130 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
131 | margin-top: 30px;
132 | }
133 |
134 | .filterArrow {
135 | width: 20px;
136 | line-height: 50px;
137 | margin-right: 10px;
138 | transition: transform 0.2s;
139 | }
140 |
141 | .filterArrow:hover {
142 | cursor: pointer;
143 | transform: scale(1.2);
144 | }
145 |
146 | .filterArrowContainer {
147 | margin-top: 25px;
148 | }
149 |
150 | .filterCard h4 {
151 | margin-top: 5px;
152 | font-weight: 700;
153 | }
154 |
155 | .filterCard h4 span {
156 | font-weight: 400;
157 | }
158 |
159 | .filterCardFootsteps {
160 | height: 50px;
161 | width: 310px;
162 | background: white;
163 | display: flex;
164 | justify-content: space-between;
165 | padding: 10px;
166 | border-radius: 5px;
167 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
168 | margin-top: 30px;
169 | margin-bottom: 30px;
170 | }
171 |
172 | .filterCardFootsteps h4 {
173 | line-height: 30px;
174 | font-weight: 700;
175 | }
176 |
177 | .filterCardFootsteps h4 span {
178 | font-weight: 500;
179 | margin-left: 10px;
180 | }
181 |
182 | @media only screen and (max-width: 768px) {
183 | .cardContainer {
184 | display: none;
185 | }
186 |
187 | .footstepsContainer {
188 | margin: 10px 0;
189 | }
190 |
191 | .mobCardContainer {
192 | display: block;
193 | border-radius: 20px;
194 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
195 | padding: 20px;
196 | margin-top: 50px;
197 | }
198 |
199 | .mobCardContainer h1 {
200 | font-weight: 600;
201 | }
202 |
203 | .mobCardContainer h3 {
204 | font-size: 16px;
205 | }
206 |
207 | .mobInfoBy p {
208 | margin-bottom: 0;
209 | }
210 |
211 | .mobInfoVotes {
212 | text-align: right;
213 | margin-bottom: 0;
214 | }
215 |
216 | .mobCardContainer span {
217 | font-weight: 700;
218 | }
219 | }
220 |
--------------------------------------------------------------------------------
/src/styles/footsteps.module.css:
--------------------------------------------------------------------------------
1 | .footstepsContainer {
2 | display: flex;
3 | flex-wrap: nowrap;
4 | overflow-x: auto;
5 | margin: 10px 50px;
6 | opacity: 1;
7 | box-sizing: border-box;
8 | transition: height 200ms 0ms, opacity 200ms 200ms;
9 | height: 500px;
10 | }
11 |
12 | .footstepsContainer::-webkit-scrollbar {
13 | display: none;
14 | }
15 |
16 | .footstepsHide {
17 | transition: height 200ms 200ms, opacity 200ms 0ms;
18 | opacity: 0;
19 | height: 0px;
20 | }
21 |
22 | .cardContainer {
23 | flex: 0 0 auto;
24 | }
25 |
26 | .cardContainer {
27 | width: 250px;
28 | height: 380px;
29 | margin: 60px 20px 10px 20px;
30 | border-radius: 40px;
31 | box-shadow: 3px 3px 17px rgba(34, 34, 34, 0.11);
32 | }
33 |
34 | .icon {
35 | width: 80px;
36 | height: 80px;
37 | display: block;
38 | margin-left: auto;
39 | margin-right: auto;
40 | margin-top: -40px;
41 | margin-bottom: 10px;
42 | border-radius: 50%;
43 | box-shadow: 0px 3px 17px rgba(34, 34, 34, 0.11);
44 | }
45 |
46 | .title {
47 | font-size: 25px;
48 | font-weight: 700;
49 | text-align: left;
50 | padding-left: 10px;
51 | }
52 |
53 | .detailsContainer {
54 | padding: 0 10px;
55 | font-family: "Montserrat", sans-serif;
56 | height: 190px;
57 | }
58 |
59 | .description {
60 | padding: 10px 10px 10px 10px;
61 | text-align: justify;
62 | font-size: 15px;
63 | }
64 |
65 | .typeContainer {
66 | height: 23px;
67 | padding: 0 30px;
68 | }
69 |
70 | .doneButton {
71 | display: block;
72 | margin-right: 10px;
73 | float: right;
74 | background-color: #ffffff;
75 | padding-bottom: 2px;
76 | border-color: #ffffff;
77 | }
78 |
79 | .iconDone {
80 | padding-bottom: 5px;
81 | }
82 | .typeImage {
83 | width: 30px;
84 | height: 30px;
85 | margin-bottom: 0;
86 | }
87 |
88 | .typeTitle {
89 | line-height: 30px;
90 | text-align: center;
91 | font-family: "Montserrat", sans-serif;
92 | font-size: 16px;
93 | font-weight: 700;
94 | }
95 |
96 | .levelContainer {
97 | margin-top: 20px;
98 | padding: 0 30px;
99 | font-family: "Montserrat", sans-serif;
100 | }
101 |
102 | .levelTitle {
103 | font-size: 16px;
104 | font-weight: 700;
105 | }
106 |
107 | .levelType {
108 | text-align: right;
109 | font-size: 16px;
110 | }
111 |
112 | .resourceLink {
113 | padding: 0 30px;
114 | margin-top: 30px;
115 | }
116 |
117 | .resourceLink:hover {
118 | cursor: pointer;
119 | }
120 |
121 | .linkArrow {
122 | text-align: right;
123 | }
124 |
125 | .learningPathsContainer {
126 | margin-top: 50px;
127 | }
128 |
129 | .learningPathHeading {
130 | font-weight: 700;
131 | font-size: 38px;
132 | margin-bottom: 60px;
133 | }
134 |
135 | .learningPathEmpty img {
136 | width: 300px;
137 | opacity: 0.8;
138 | display: block;
139 | margin-left: auto;
140 | margin-right: auto;
141 | }
142 |
143 | .learningPathEmpty h1 {
144 | text-align: center;
145 | font-weight: 600;
146 | margin-bottom: 60px;
147 | }
148 |
149 | .learningPathCard {
150 | width: 95%;
151 | display: block;
152 | margin-left: auto;
153 | margin-right: auto;
154 | box-shadow: 3px 3px 17px rgba(34, 34, 34, 0.11);
155 | padding: 20px;
156 | margin: 0 30px 30px 30px;
157 | border-radius: 50px;
158 | cursor: pointer;
159 | }
160 |
161 | .editBtn {
162 | box-shadow: 1px 1px 17px rgba(34, 34, 34, 0.11);
163 | border-radius: 50%;
164 | display: inline-block;
165 | padding: 5px 8px;
166 | transform: scale(1.2);
167 | cursor: pointer;
168 | transition: transform 0.2s;
169 | }
170 |
171 | .editBtn:hover {
172 | transform: scale(1.4);
173 | }
174 |
175 | .pathIcon {
176 | margin-bottom: 0;
177 | width: 150px;
178 | }
179 |
180 | .pathExpand {
181 | text-align: center;
182 | font-size: 30px;
183 | line-height: 150px;
184 | -moz-transition: all 0.2s linear;
185 | -webkit-transition: all 0.2s linear;
186 | transition: all 0.2s linear;
187 | }
188 |
189 | .expandRotate {
190 | -moz-transform: rotate(180deg);
191 | -webkit-transform: rotate(180deg);
192 | transform: rotate(180deg);
193 | }
194 |
195 | .pathHeading {
196 | padding: 10px;
197 | }
198 |
199 | .timelineDot {
200 | display: block;
201 | width: 10px;
202 | height: 10px;
203 | background: #029843;
204 | border-radius: 50%;
205 | margin-left: auto;
206 | margin-right: auto;
207 | margin-top: 40px;
208 | }
209 |
210 | .timelineBox {
211 | width: 260px;
212 | background: #029843;
213 | height: 5px;
214 | position: relative;
215 | top: -7.5px;
216 | left: 140px;
217 | }
218 |
219 | @media only screen and (max-width: 768px) {
220 | .footstepsContainer {
221 | margin: 10px 0;
222 | }
223 |
224 | .pathIcon {
225 | margin-top: 40px;
226 | }
227 |
228 | .learningPathHeading {
229 | font-size: 30px;
230 | }
231 |
232 | .learningPathCard {
233 | margin: 15px 0 30px 0;
234 | padding: 0 10px;
235 | width: 100%;
236 | }
237 |
238 | .pathIcon {
239 | display: block;
240 | margin-left: auto;
241 | margin-right: auto;
242 | margin-bottom: 20px;
243 | }
244 |
245 | .pathExpand {
246 | line-height: 90px;
247 | }
248 | }
249 |
--------------------------------------------------------------------------------
/src/components/Search/searchResult.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react"
2 | import { Row, Select } from "antd"
3 |
4 | import ResultPathCard from "./resultPathCard"
5 | import ResultFootstepCard from "./resultFootstepCard"
6 | import styles from "../../styles/result.module.css"
7 |
8 | const { Option } = Select
9 |
10 | export class SearchResult extends Component {
11 | state = {
12 | currPaths: [],
13 | currFootsteps: [],
14 | }
15 |
16 | componentDidMount() {
17 | this.setState({
18 | currFootsteps: this.props.footsteps,
19 | currPaths: this.props.paths,
20 | })
21 | }
22 |
23 | sortPathsAscending = () => {
24 | let { currPaths } = this.state
25 |
26 | let sortedArray = currPaths.sort((a, b) => {
27 | return (
28 | a.votes_aggregate.aggregate.count - b.votes_aggregate.aggregate.count
29 | )
30 | })
31 |
32 | this.setState({
33 | currPaths: sortedArray,
34 | })
35 | }
36 |
37 | sortPathsDescending = () => {
38 | let { currPaths } = this.state
39 |
40 | let sortedArray = currPaths.sort((a, b) => {
41 | return (
42 | a.votes_aggregate.aggregate.count + b.votes_aggregate.aggregate.count
43 | )
44 | })
45 |
46 | this.setState({
47 | currPaths: sortedArray,
48 | })
49 | }
50 |
51 | onSelectChange = (value) => {
52 | if (value === "a") {
53 | this.setState({
54 | currFootsteps: this.props.footsteps,
55 | })
56 | } else if (value === "0") {
57 | let tempArray = this.props.footsteps.filter(
58 | (footstep) => footstep.level === 0
59 | )
60 | this.setState({ currFootsteps: tempArray })
61 | } else if (value === "1") {
62 | let tempArray = this.props.footsteps.filter(
63 | (footstep) => footstep.level === 1
64 | )
65 | this.setState({ currFootsteps: tempArray })
66 | } else if (value === "2") {
67 | let tempArray = this.props.footsteps.filter(
68 | (footstep) => footstep.level === 2
69 | )
70 | this.setState({ currFootsteps: tempArray })
71 | }
72 | }
73 |
74 | render() {
75 | return (
76 |
77 |
78 |
Learning Paths ({this.props.paths.length})
79 |
80 | {this.props.paths.length !== 0 ? (
81 |
82 |
83 |
84 | Sort by: Votes
85 |
86 |
87 |
this.sortPathsAscending}
92 | />{" "}
93 |
this.sortPathsDescending}
98 | />{" "}
99 |
100 |
101 | {this.state.currPaths.map((path, index) => {
102 | return
103 | })}
104 |
105 | ) : (
106 |
No Paths Found
107 | )}
108 |
109 |
110 |
111 |
Footsteps ({this.props.footsteps.length})
112 |
113 | {this.props.footsteps.length !== 0 ? (
114 |
115 |
116 |
117 | Filter By: Level
118 |
119 |
126 | All
127 | Beginner
128 | Intermediate
129 | Expert
130 |
131 |
132 | {this.state.currFootsteps.length !== 0 ? (
133 |
134 | {this.state.currFootsteps.map((footstep, index) => {
135 | return
138 | ) : (
139 |
No Footsteps Found
140 | )}
141 |
No Footsteps Found
144 | )}
145 |
146 |
147 |
91 |
92 |
119 | {this.state.isSignedIn === null ? (
120 |
121 |
122 |
124 | ) : this.state.isSignedIn === false ? (
125 | <>
126 |
127 |
128 | {!this.state.signUp ? (
129 |
134 |
135 |
136 | ) : (
137 |
140 |
141 |
142 | {this.props.children}
143 |
144 |
145 | )}
146 |
road sign
25 |
26 |
27 | Welcome to Footsteps
28 |
29 |
30 |
31 | Search 🔎 community-made 🧑🤝🧑learning paths here!
32 |
33 |
34 |
40 | A journey of a thousand miles
43 |
44 | Start your learning journey today
45 |
46 |
47 |
52 |
53 |
54 |
55 | {/* About footsteps */}
56 |
57 |
58 |
63 | About Footsteps
65 | In today's era, a new knowledge is a few mouse clicks away. As the
66 | internet is flooded with a plethora of resources, it raises a new
67 | problem for a modern-day learner. It becomes difficult for him/her
68 | to choose the right resources suited for his/her needs. Footsteps
69 | is here to tackle this issue
70 |
76 |
77 |
78 | {/* How footsteps work */}
79 |
80 |
81 | How footsteps work?
83 |
84 | The internet is filled with a huge amount of resources and hence
85 | it becomes difficult for a person to find the right resource
86 | suited for his/her requirement. With footsteps, you can see the
87 | exact path followed by an expert to reach his/her current
88 | position. You can see the resources and materials that they had
89 | referred in a chronological order.
90 |
96 |
97 |
101 |
104 |
106 | With the Footsteps app, we take a mentor/subject knowledge
107 | expert first approach to solve the problem. The domain
108 | experts save their learning journey with our app & make it
109 | available for everyone else to follow
110 |
111 |
112 |
114 | Every resource is called a 'footstep' and a collection of
115 | footsteps makes up a learning path. The learners can search
116 | for their topic of interest in the search bar and most
117 | recommended path to learn that topic shows up in the result
118 |
119 |
120 |
122 | The learner can "fork" the learning path made by the expert
123 | and keep a track of his progress. The app suggests resources
124 | and keeps an updated list with users upvotes & collaborative
125 | filtering.
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 | {/* FAQ Section */}
134 |
135 |
136 |
141 | FAQ
143 | Is footsteps a free/paid app ?
144 | I am a beginner. Can I use footsteps ?
149 | Is footsteps avaliable offline ?
156 | Other than footsteps web, what are the other options ?
161 |
167 | I liked the site and would love to contribute to it. How can I
168 | get started ?
169 |
170 |
174 | footsteps github
175 |
176 |
180 |
181 |
101 |
102 | {this.props.index}
104 |
105 |
106 | this.props.remove(this.props.data.id)}
109 | className={styles.footstep_remove_btn}
110 | >
111 | X
112 |
113 |
114 |
115 |
116 |
117 | Title
119 | Description
128 |
136 |
137 | Resource URL
138 |
149 | {this.state.icon_url && (
150 |
151 | )}
152 |
155 |
157 | Icon URL
158 |
159 |
171 |
186 |
187 |
188 |
189 | Resource Type
191 |
200 | Audio
201 | Blog
202 | Book
203 | Cheat Sheet
204 | Competition
205 | Course
206 | Documentation
207 | Video
208 | Tool
209 | Research Paper
210 | Resource List
211 | Study Plan
212 |
213 |
214 | Resource Level
216 |
225 | Beginner
226 | Intermediate
227 | Expert
228 |
229 |
230 |
231 |
232 |
233 |
116 |
117 | {this.props.index}
119 |
120 |
121 | this.props.remove(this.props.data.id)}
124 | className={addStyles.footstep_remove_btn}
125 | >
126 | X
127 |
128 |
129 |
130 |
131 |
132 | Title
134 | Description
143 |
151 |
152 | Resource URL
153 |
164 | {this.state.icon_url && (
165 |
166 | )}
167 |
170 |
175 | Icon URL
176 |
177 |
189 |
204 |
205 |
206 |
207 | Resource Type
209 |
218 | Audio
219 | Blog
220 | Book
221 | Cheat Sheet
222 | Competition
223 | Course
224 | Documentation
225 | Video
226 | Tool
227 | Research Paper
228 | Resource List
229 | Study Plan
230 |
231 |
232 | Resource Level
234 |
243 | Beginner
244 | Intermediate
245 | Expert
246 |
247 |
248 |
249 |
250 |
251 |
126 |
127 |
128 |
129 |
130 |
{data.title}
131 |
{data.description}
132 |
133 |
134 |
135 |
230 |
231 |
232 |
239 |
240 | {/*
241 |
*/}
248 |
249 |
window.open(data.resource_url)}
252 | >
253 | {this.state.resourceLink}
255 |
256 |
260 |
261 |
124 |
125 |
126 |
127 |
128 | {data.title}
130 |
131 |
133 |
145 |
146 |
147 |
{data.description}
148 |
149 |
150 |
151 |
246 |
247 |
248 |
255 |
256 |
window.open(data.resource_url)}
259 | >
260 | {this.state.resourceLink}
262 |
263 |
267 |
268 |
279 |
profile
25 |
26 |
27 |
28 | {data.first_name} {data.last_name}
29 |
30 | {data.username}
31 | {data.bio}
32 |
33 |
34 |
35 |
36 |
37 | {data.github !== "" &&
38 | data.github !== null &&
39 | data.github !== "https://github.com/" ? (
40 | window.open(data.github)}
43 | className={styles.icon}
44 | />
45 |
46 | ) : (
47 | ""
48 | )}
49 | {data.linkedin !== "" &&
50 | data.linkedin !== null &&
51 | data.linkedin !== "https://linkedin.com/" ? (
52 | window.open(data.linkedin)}
55 | className={styles.icon}
56 | />
57 |
58 | ) : (
59 | ""
60 | )}
61 | {data.twitter !== "" &&
62 | data.twitter !== null &&
63 | data.twitter !== "https://twitter.com/" ? (
64 | window.open(data.twitter)}
67 | className={styles.icon}
68 | />
69 |
70 | ) : (
71 | ""
72 | )}
73 | {data.facebook !== "" &&
74 | data.facebook !== null &&
75 | data.facebook !== "https://facebook.com/" ? (
76 | window.open(data.facebook)}
79 | className={styles.icon}
80 | />
81 |
82 | ) : (
83 | ""
84 | )}
85 |
86 |
87 |
88 |
89 |
90 |
About
91 |
97 | Profile Link
98 |
99 |
{data.about}
100 | {data.skills !== null ? (
101 |
102 |
Skills
103 | {data.skills.split(",").map((skill, i) => {
104 | return (
105 |
106 | {skill}
107 |
108 | )
109 | })}
110 |
111 | ) : (
112 |
113 | )}
114 |
115 |
116 |
118 |
119 |
121 | {data.learning_paths_aggregate.aggregate.count}
122 | Learning Paths
123 |
124 |
125 |
127 | {data.followers_aggregate.aggregate.count}
128 | Followers
129 |
130 |
131 |
133 | {data.following_aggregate.aggregate.count}
134 | Following
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 | {data.first_name} {data.last_name}
147 |
148 | {data.username}
149 | {data.bio}
150 |
151 |
152 |
153 |
154 |
156 | {data.followers_aggregate.aggregate.count}
157 |
158 | Followers
159 |
160 |
162 | {data.following_aggregate.aggregate.count}
163 |
164 | Following
165 |
166 |
168 | {data.learning_paths_aggregate.aggregate.count}
169 |
170 | Learning Paths
171 |
172 |
173 |
174 |
176 |
177 |
178 |
{data.about}
179 |
180 | {data.skills !== null ? (
181 |
182 |
Skills
183 | {data.skills.split(",").map((skill, i) => {
184 | return (
185 |
186 | {skill}
187 |
188 | )
189 | })}
190 |
191 | ) : (
192 |
193 | )}
194 |
195 |
196 |
197 | {data.github !== "" &&
198 | data.github !== null &&
199 | data.github !== "https://github.com/" ? (
200 | window.open(data.github)}
203 | className={styles.icon}
204 | />
205 |
206 | ) : (
207 | ""
208 | )}
209 | {data.linkedin !== "" &&
210 | data.linkedin !== null &&
211 | data.linkedin !== "https://linkedin.com/" ? (
212 | window.open(data.linkedin)}
215 | className={styles.icon}
216 | />
217 |
218 | ) : (
219 | ""
220 | )}
221 | {data.twitter !== "" &&
222 | data.twitter !== null &&
223 | data.twitter !== "https://twitter.com/" ? (
224 | window.open(data.twitter)}
227 | className={styles.icon}
228 | />
229 |
230 | ) : (
231 | ""
232 | )}
233 | {data.facebook !== "" &&
234 | data.facebook !== null &&
235 | data.facebook !== "https://facebook.com/" ? (
236 | window.open(data.facebook)}
239 | className={styles.icon}
240 | />
241 |
242 | ) : (
243 | ""
244 | )}
245 |
246 |
247 |
248 |
249 |
250 |
251 |
253 |
258 |
259 |
260 |
6 |
10 |
11 |
12 |
18 |
19 | ## 🤷 About
20 |
21 | We envisioned the project to solve the problems faced by a 21st-century learner. A learner in the internet age finds herself/himself in a flood of resources from search engines. Although s/he finds links to learn, they're not always from the best teachers/best-rated ones since it's the website with the best SEO (search engine optimization) that shows the topmost results. On top of that, there are so many free resources available on the internet made by experts in their field and yet we are forced to pay for the outdated courses promoted by big companies and universities.
22 |
23 | With Footsteps app & [browser extension](https://github.com/fnplus/footsteps-extension), we take a subject knowledge expert (mentor) first approach to solve the problem of finding the best resources to learn. It works by having the domain experts save their learning journey with our web app and browser extension & making it available for everyone else to follow. Every resource is called a 'footstep' (added chronologically) and a collection of footsteps makes up a learning path. The learner can "save" the learning paths to his learning journey and keep a track of his progress. The app also suggests other recommended paths rated well by other learners in the Footsteps Community.
24 |
25 | ## 🧐 The Need (as seen on the web)
26 |
27 | Here are a few examples of why we came up with footsteps:
28 |
29 | [**Reddit thread - "About IBMs Data Science Certification"**](https://www.reddit.com/r/datascience/comments/eleuz9/about_ibms_data_science_certification/)
30 |
31 | ## 🤩 Proposed/Upcoming features
32 |
33 | | **SL No.** | **Feature** | **Status** |
34 | | ---------- | -------------------------------------------------------------------------------------------------- | ---------- |
35 | | 01 | Ability to make the path private/public. | |
36 | | 02 | The ability to "fork" a learning path & suggest changes. | |
37 | | 03 | A collaborative filtering recommendation system for recommending the right resources to a learner. | |
38 | | 04 | Ability to save your progress (with a progress bar) in a learning path. | |
39 | | 05 | Ability to upvote a learning path. | |
40 | | 06 | Ability to follow a user. | |
41 | | 07 | A modified home page UI with a search bar, active learning paths & new leaning paths by 'followed' users| |
42 |
43 | ## 🚀 Quickstart
44 |
45 | ### **Here is our quick start guide. See our [Wiki](https://github.com/fnplus/footsteps-app/wiki/Contributing-to-Footsteps-App) for detailed instructions!**
46 |
47 | 1. **Install the Gatsby CLI.**
48 |
49 | ```shell
50 | npm install -g gatsby-cli
51 | ```
52 |
53 | 2. **Fork & Clone the repo**
54 |
55 | ```shell
56 | git clone https://github.com/[yourname]/footsteps-app
57 | ```
58 |
59 | 3. **Install node dependencies**
60 |
61 | Use the Gatsby CLI to create a new site, specifying the starter.
62 |
63 | ```shell
64 | cd footsteps-app/
65 | npm install
66 | ```
67 |
68 | 4. **Add Credentials to .env**
69 |
70 | Create `.env.development` file and add your variables listed below.
71 |
72 | Use the below credentials for testing purposes
73 |
74 | ```shell
75 | GATSBY_HASURA_GRAPHQL_URL=http://rle-test.herokuapp.com/v1/graphql
76 | GATSBY_HASURA_GRAPHQL_ADMIN_SECRET=!footstepstest!
77 | GATSBY_FIREBASE_API_KEY=AIzaSyCfv2UcXCifCqmo6PhpdjKajVcpP_8Al9M
78 | GATSBY_FIREBASE_AUTH_DOMAIN=fnplus-rle-test.firebaseapp.com
79 | GATSBY_FIREBASE_DATABASE_URL=https://fnplus-rle-test.firebaseio.com
80 | GATSBY_FIREBASE_PROJECT_ID=fnplus-rle-test
81 | GATSBY_FIREBASE_STORAGE_BUCKET=fnplus-rle-test.appspot.com
82 | GATSBY_FIREBASE_MESSAGING_SENDER_ID=1042822146411
83 | GATSBY_FIREBASE_APP_ID=1:1042822146411:web:d09d2baa58dd82ff49842e
84 | GATSBY_GOOGLE_TRACKING_ID=UA-154496987-1
85 | ```
86 |
87 | For access to the Firebase project, please fill [this](https://airtable.com/shrOevwzFNas0wis3) form.
88 |
89 | For access to the testing DB, use [this](https://rle-test.herokuapp.com/console/login) link & enter '!footstepstest!' as the password.
90 |
91 | 5. **Start developing.**
92 | Navigate into your new site’s directory and start it up.
93 |
94 | ```sh
95 | gatsby develop
96 | ```
97 |
98 | 6. **Open the source code and start editing!**
99 |
100 | Your site is now running at `http://localhost:8000`!
101 |
102 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
103 |
104 | Open the `footsteps-app` directory in your code editor of choice and edit files under `src`. Save your changes and the browser will update in real time!
105 |
106 | ## 🎓 Learning Gatsby
107 |
108 | Full documentation for Gatsby lives [on the website](https://gatsbyjs.org/).
109 |
110 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
111 |
112 | - **To dive straight into code samples head [to our documentation](https://gatsbyjs.org/docs/).** In particular, check out the “Guides ”, “API Reference ”, and “Advanced Tutorials ” sections in the sidebar.
113 |
114 | We welcome suggestions for improving our docs. See the [“how to contribute”](https://gatsbyjs.org/contributing/how-to-contribute/) documentation for more details.
115 |
116 | **Start Learning Gatsby: [Follow the Tutorial](https://gatsbyjs.org/tutorial/) · [Read the Docs](https://gatsbyjs.org/docs/)**
117 |
118 |
119 | ## 👨 Project Admin
120 |
121 | - Abhishek Uniyal [
122 |
123 | ## 👬 Mentors
124 | | Name | Point of Contact |
125 | | ------- | ------- |
126 | | Dev Daksan | [
|
127 | | Praveen Kumar | [
|
128 | | Sudipto Ghosh | [
|
129 | | Tarun Nagpal | [
|
130 |
131 | Feel free to ask your queries!! 🙌
132 |
133 | ## :trophy: Competition
134 |
135 | - This project was selected in [HakinCodes Contributor's Hack, 2020](https://hakincodes.tech/).
136 |
137 | 
138 |
139 | - This project was selected in [GirlScript Summer of Code 2020](https://www.gssoc.tech/).
140 |
141 | 
142 |
143 | ## :memo: License
144 |
145 | Licensed under the [GPL v3 License](./LICENSE).
146 |
147 | ## :heart: Thanks
148 |
149 | Thanks to our many contributors and to [Netlify](https://www.netlify.com/) & [Heroku](https://www.heroku.com) for hosting [footsteps.dev](https://footsteps.dev).
150 |
--------------------------------------------------------------------------------
![Customised learning paths]({require("../images/versionControl.svg")})
27 |
28 | ![Path Empty]({require("../../images/pathEmpty.png")})
34 | ![Road Sign]({require("../../images/roadSign.svg")})
36 |
37 | ![]({require("../../images/results/upArrow.png")})
this.sortPathsAscending}
92 | />{" "}
93 | ![]({require("../../images/results/downArrow.png")})
this.sortPathsDescending}
98 | />{" "}
99 | ![]({require("../../images/footsteps/internet.png")})
142 | ) : (
143 | ""
144 | )}
145 |
146 | {this.state.video ? (
147 | ![]({require("../../images/footsteps/video.png")})
152 | ) : (
153 | ""
154 | )}
155 |
156 | {this.state.blog ? (
157 | ![]({require("../../images/footsteps/blog.png")})
162 | ) : (
163 | ""
164 | )}
165 |
166 | {this.state.course ? (
167 | ![]({require("../../images/footsteps/course.png")})
172 | ) : (
173 | ""
174 | )}
175 |
176 | {this.state.plan ? (
177 | ![]({require("../../images/footsteps/plan.png")})
182 | ) : (
183 | ""
184 | )}
185 |
186 | {this.state.quiz ? (
187 | ![]({require("../../images/footsteps/quiz.png")})
192 | ) : (
193 | ""
194 | )}
195 |
196 | {this.state.audio ? (
197 | ![]({require("../../images/footsteps/audio.png")})
202 | ) : (
203 | ""
204 | )}
205 |
206 | {this.state.page ? (
207 | ![]({require("../../images/footsteps/page.png")})
212 | ) : (
213 | ""
214 | )}
215 |
216 | {this.state.book ? (
217 | ![]({require("../../images/footsteps/book.png")})
222 | ) : (
223 | ""
224 | )}
225 |
226 | 
13 | 
](https://github.com/xlogix) [
](https://www.linkedin.com/in/abhishek-uniyal)