Giter Club home page Giter Club logo

fnplus / footsteps-app Goto Github PK

View Code? Open in Web Editor NEW
42.0 6.0 72.0 6.14 MB

A search πŸ”Ž engine of experts-led learning paths. Learn by following the footsteps (journey) of experts. πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’»

Home Page: https://www.footsteps.dev/

License: GNU General Public License v3.0

JavaScript 81.79% CSS 18.21%
learning-paths gatsby hasura-graphql footsteps awesome-lists tutorials knowledge-base search-engine react

footsteps-app's Introduction

πŸ‘£ Footsteps - Learning Resources Aggregator

A Search πŸ”ŽEngine of Community-made πŸ§‘β€πŸ€β€πŸ§‘learning resources for the 21st-century learner.πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’»Learn by following the footsteps (resources) of experts or make your own, giving others the right advice/resources to learn.

GitHub issues GitHub forks GitHub stars

FOSSA Status LICENSE CODACY CODEFACTOR FOSSA Status

🀷 About

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.

With Footsteps app & browser 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.

🧐 The Need (as seen on the web)

Here are a few examples of why we came up with footsteps:

Reddit thread - "About IBMs Data Science Certification"

🀩 Proposed/Upcoming features

SL No. Feature Status
01 Ability to make the path private/public.
02 The ability to "fork" a learning path & suggest changes.
03 A collaborative filtering recommendation system for recommending the right resources to a learner.
04 Ability to save your progress (with a progress bar) in a learning path.
05 Ability to upvote a learning path.
06 Ability to follow a user.
07 A modified home page UI with a search bar, active learning paths & new leaning paths by 'followed' users

πŸš€ Quickstart

Here is our quick start guide. See our Wiki for detailed instructions!

  1. Install the Gatsby CLI.

    npm install -g gatsby-cli
  2. Fork & Clone the repo

    git clone https://github.com/[yourname]/footsteps-app
  3. Install node dependencies

    Use the Gatsby CLI to create a new site, specifying the starter.

    cd footsteps-app/
    npm install
  4. Add Credentials to .env

    Create .env.development file and add your variables listed below.

    Use the below credentials for testing purposes

    GATSBY_HASURA_GRAPHQL_URL=http://rle-test.herokuapp.com/v1/graphql
    GATSBY_HASURA_GRAPHQL_ADMIN_SECRET=!footstepstest!
    GATSBY_FIREBASE_API_KEY=AIzaSyCfv2UcXCifCqmo6PhpdjKajVcpP_8Al9M
    GATSBY_FIREBASE_AUTH_DOMAIN=fnplus-rle-test.firebaseapp.com
    GATSBY_FIREBASE_DATABASE_URL=https://fnplus-rle-test.firebaseio.com
    GATSBY_FIREBASE_PROJECT_ID=fnplus-rle-test
    GATSBY_FIREBASE_STORAGE_BUCKET=fnplus-rle-test.appspot.com
    GATSBY_FIREBASE_MESSAGING_SENDER_ID=1042822146411
    GATSBY_FIREBASE_APP_ID=1:1042822146411:web:d09d2baa58dd82ff49842e
    GATSBY_GOOGLE_TRACKING_ID=UA-154496987-1

    For access to the Firebase project, please fill this form.

    For access to the testing DB, use this link & enter '!footstepstest!' as the password.

  5. Start developing. Navigate into your new site’s directory and start it up.

    gatsby develop
  6. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    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.

    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!

πŸŽ“ Learning Gatsby

Full documentation for Gatsby lives on the website.

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples head to our documentation. In particular, check out the β€œGuides”, β€œAPI Reference”, and β€œAdvanced Tutorials” sections in the sidebar.

We welcome suggestions for improving our docs. See the β€œhow to contribute” documentation for more details.

Start Learning Gatsby: Follow the Tutorial Β· Read the Docs

πŸ‘¨ Project Admin

  • Abhishek Uniyal

πŸ‘¬ Mentors

Name Point of Contact
Dev Daksan

Praveen Kumar

Sudipto Ghosh

Tarun Nagpal

Feel free to ask your queries!! πŸ™Œ

πŸ† Competition

HakinCodes Logo

GSSoC Logo

πŸ“ License

Licensed under the GPL v3 License.

❀️ Thanks

Thanks to our many contributors and to Netlify & Heroku for hosting footsteps.dev.

footsteps-app's People

Contributors

abhinashgiri avatar aditianshu avatar aman-codes avatar annu12340 avatar d3vd avatar dependabot[bot] avatar fossabot avatar harshmehta2468 avatar imabhishekkumar avatar imrishabh18 avatar krsnvijay avatar manxi avatar prajwal714 avatar praveenscience avatar pydevsg avatar ramneek008 avatar roshankcjha avatar saraikium avatar shreyakapoor08 avatar snyk-bot avatar suchana34 avatar xlogix avatar xtremilicious avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

footsteps-app's Issues

Show user's image & Name in public profile link

The public profile URL doesn't have proper meta tags which show an image of the user & name while sharing on social media.

Try sharing your public profile page on WhatsApp or Telegram to test the link

Implement Proper Search Query

Need to implement the right Graphql query to search through all the learning paths and footsteps. Right now I am using the contains clause but it requires the user to be very specific with the keyword or else it doesn't work.

Do we need to create a custom function?

Code Refactoring and Reduce Redundancy in several files

Make separate stateless/stateful function modules for frequently used React components. Separate JS file for validation function, also unified naming conventions of all the CSS files imported.
Components/Create/addPaths.js
Components/EditPath/editPath.js
etc

⚠️ Greenkeeper is no longer available for new installations

Hello!

Greenkeeper is no longer available for new installations.

The service will be saying goodbye πŸ‘‹ and passing the torch to Snyk on June 3rd, 2020. Find out more at greenkeeper.io.

If this is your only Greenkeeper installation, you can just sign up for Snyk directly, it’s free for Open Source even has free features for private projects as well.

Nevertheless, thanks for your interest in Greenkeeper! We’re sure your repositories will find a good home at Snyk β˜€οΈπŸ‘πŸ’œ

All the best from everyone at Greenkeeper! πŸ‘‹πŸ€–πŸŒ΄

Fix SEO of the publicProfile page

The Search Engine Optimisation for the public profile page needs to be updated. Apart from adding usual UTF tags, favicons, etc. The title and description of the page should be dynamic. For example, the title can be: "Walk in the footsteps of {FirstName}'" The description can be: "{FirstName} has made learning paths using FootstepsApp. Follow {FirstName} and learn the way he recommends it"

It is open to your imagination. I'm open to more ideas.

Add a landing page for the App

The contributor should be able to able to put together a landing page that can show the why & how of the problem we're solving to people. It's crucial that the page looks engaging and follows good UX practices.

Make the app usable without logging in. Reserve some features for logged-in users

So, we started working on the app with a signup & login screen as I wanted to keep it exclusive to Fnplus community members. But, now the plan is to make the app available for all. In order to that, we need to remove the signup screen from the app and keep it optional.
A user should be able to search for learning paths in the app but any other functionality like browsing user profiles, forking a learning path or editing should be limited to signed-in users.

Add a progress bar in profile page to encourage completion of profile fields

We want users to complete their profile by adding their skills and social links. This helps in creating trust in the network and also helps people to discover new users. But, we don't want to keep the profile input fields to be mandatory on signup. This will be a bad user experience and many people will quit.

Instead, we'll be using Game Design to encourage users to complete their profiles after they've successfully signed up. On the profile screen, we'll be adding a progress bar which checks if they've added all social links and other necessary inputs.

P.S: For design inspirations, Google 'LinkedIn All-Star profile'

ReferanceError while building

The following error occurs while running gatsby build. The issue is most probably associated with the firebase module.

gatsbyjs/gatsby#10457 (comment)

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  85 | ]);
  86 | 
> 87 | proxyRequestMethods(Index, '_index', IDBIndex, [
     | ^
  88 |   'get',
  89 |   'getKey',
  90 |   'getAll',


  WebpackError: ReferenceError: IDBIndex is not defined

Add ability to Upvote a learning path & Update the vote counter on Db

The UI should have an option to upvote a learning path by a user. The vote count should change when a user upvotes a path.
P.S: It would be better to use a HashMap here with the IDs of the users who upvoted. This would help us design a better recommendation engine as well.

Add 'Mark as Done' icon on a Footstep

We're working on adding a progress bar on a learning path. A progress bar can only 'progress' if the user is able to select the Footstep(s) and mark them as 'done'.

Refer to issue #17

Why Sign In Made Mandatory ---

why this app/web make sign in compulsory?

it will cause privacy concerns of activity tracking. If they don't require to.

PS: most people won't like to try due to privacy concerns. Just a bit of Advice of what i feel.

Add autocomplete to the search bar

The search bar should show a drop-down list of results related to the query.
We should be able to improve the search suggestions based on other queries submitted to the app. We can also keep a word-list of popular keywords for auto-complete.

Feel free to put your ideas/suggestions here.

Modify the Home Page

The home page of the app can be modified to include the learning paths which the user has subscribed to/starred/active on. It can also include recommendations for other paths based on user's preferences/active learning paths.

This would work well with the search bar moved to the top. See issue #24

The website not working after login with github

The page become blank after a few seconds and the following error message is printed to the console

TypeError: Cannot read property 'split' of null
    at o.a.componentDidMount (signUpFlow.js:36)
    at ys (react-dom.production.min.js:6372)
    at t.unstable_runWithPriority (scheduler.production.min.js:274)
    at Gi (react-dom.production.min.js:2842)
    at bs (react-dom.production.min.js:6153)
    at os (react-dom.production.min.js:5456)
    at react-dom.production.min.js:2877
    at t.unstable_runWithPriority (scheduler.production.min.js:274)
    at Gi (react-dom.production.min.js:2842)
    at Yi (react-dom.production.min.js:2872)
fc @ commons-2acae78f2a3b97d5654e.js:1

image

Add a consistent search bar in the app

We can improve the experience of the search by keeping the search bar at the top available for the user anytime. The search results can come below it. The user would be able to modify the query as per their need.

Convert all components to use the context api data

User data has been added to the context API. Many existing components are making requests to the server in order to get this data. Need to update these components to use the context API data instead.

Add ISSUE_TEMPLATE

@praveenscience @xlogix I am a GSSOC participant and I would like to add an issue template folder with bug_report_template.md, feature_request_template.md and pull_request_template.md

Screenshots

Bug Report

bug report

Feature request

feature request

Pull request

pull request

Implement Follow Path Feature

Add ability for the user to follow a particular path and the followed paths should be available on their profile.

Add a contribution guidelines

Hi,
I would like to propose that a contribution guidelines document should be added to the repo to make it easy for the contributors like me to get started with the projects. What I'm proposing is a standard way of making PRs, branch naming, commit messages and anything else that I might be missing.

I was searching around and I found this guide for making the commit messages standard. Any help, guidelines would be appreciated and I'm willing to make a document based on the suggestions.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.