mlh-fellowship / 0.4.1-quarantime Goto Github PK

• Need to setup authentication using Firebase (check boilerplate below)

Docs
Reference to some boilerplate code I have written to act as middleware

• Update README with more details on how to build + run the project; technologies used; and any other notes
• Add an Open source license

Todo:

• Implement user registration using a valid authentication & database.
• Maintain session of a user who is logged in.

Idea

We're going to implement a social media website/ app for people to share their open source projects, or any other activities they are doing during this quarantine time.

Features

We'll implement these features for our app:

1. Log-in to personal account:

• Users log in with their email address and password to their account using Firebase

2. Newsfeed page: where people post/ share what they are working on

• For open source projects, can design a template for people to use (e.g: technologies they use, any help they need, etc.) using React JSON Schema
• Besides open source, people can post pictures and share about other non-tech activities. For eg: "I'm practicing LeetCode and need someone to share the Premium account with."

3. Tag system and Trending summary:

• Each post can include tags to determine which category it falls into.
• Depending on the tags, can create a nice summary of data using "React JSON Schema"

4. Chat feature:

• A basic messaging function for users to connect with each other
• Implement using React

Enhance the UI when loading the posts. Currently it just prints "Please wait.." on the screen.

Add some padding in forms. The input fields run out of the screen on the right when viewing on mobile.

• Implement the chat function using sockets

Hey mentors, I opened this website and it is crashed and says TypeError: t.data is undefined.

here i am provided the screenshots.

Modifications in order of priority (first one is highest priority)

• Title
• Post Templates
• Forms
• News Feed

• Implement the form to take data from students
• Create a newsfeed

Create CHANGELOG.md to maintain changes with each release

Enhance the UI when one clicks on comments, currently it just shows "Loading post.."

Todo:

• Resolve dependency issues
• Implement backend for the server

configs hold the secret to DB.
I guess using environment variable would be better instead.

Let's talk about the datapoints we want from the user, a few that I have identified are

• Project Name (string)
• Technology Tags (created a component for this, need help centering stuff)
• Project Description (textarea)
• Broad field Tags (created a component for this, need help centering stuff)

Additional Tags if required

• Image/Resource upload
• Posts for regular non-coding things, so that we can base the community and chat feature around it

Information:

• 1. Project Name & Purpose: @jessieAnhNguyen

• Name: Quarantime

• Purpose: In this quarantine time, millions of people all over the world are in lockdown and staying in their homes. A lot of them are working on awesome open-source projects, but might not have a way to share their progress or receive help from others. Thus, "Quarantime" is a social media platform for people to share their projects, connect with other developers, and make opportunities available to the community.

• 2. Introduce the Team:

• Kunal: Sophore (becoming Junior) studying Computer Science and Engineering in India. Open Source enthusiast, community guy ☀️

• Aniketh: Final year undergraduate student studying Computer Science Engineering at Karunya University

• Saphal: Final year undergraduate student studying Electronics and Communication Engineering at Delhi Technological University

• Jessie: junior studying CS at University of Rochester, currently in Vietnam

• 3. Explain the problem: @jessieAnhNguyen

  • This Pandemic has affected a lot of people, especially students. We believe in the power of the community.
  • We have focussed on 2 aspects here for students:
    1. Lack of awareness regarding opportunities
    2. Finding it difficult to get started with Open Source
  • We understand that it gets overwhelming to get started with open source for a beginner. Most of the students don't get the right guidance during their school/college years. They are unaware of the opportunities available.

• Students don't have yet a fun social media platform where they can post about what they are working on and share opportunities before and after the lockdown.

• Also don't have a way to find what's trending in the open-source community (technologies, platforms, etc.)

• Students might also wanna have a group chat to discuss with each other about a project, etc.

• 4. Demo the Solution: @anikethsaha @jessieAnhNguyen @kunal-kushwaha
  Keeping that in mind, we have built this social media platform for people to:

  • Share their stories during Quarantine time, helping the community by making them aware of the opportunities available (both during and after lockdown) that they might not be aware of.
  • Open-source the projects that they have worked on, be it at Hackathons, School projects, etc. so that other students can collaborate & learn in addition to helping the project grow. This will increase community engagement among students and promote the open source culture.

• 5. Open Source Project Tie-in: @kunal-kushwaha

• Technologies we used:

  • React
  • Semantic UI React
  • GraphQL
  • MongoDB Atlas
  • Node.js
  • Express.js
  • mongoose
  • react-router-dom
  • Apollo Server
  • JWT (JSONWebToken)
  • bcrypt.js
  • Sockets
  • Markdown
  • GitHub for collaboration: issues, pull requests

• 6. Individual contributions:

• Kunal:

  • Backend including Auth, DBMS (MongoDb Atlas)
  • Integrating Frontend with Backend using Apollo
  • state management using apollo-cache
  • Frontend (basic design using React)
  • Deployed backend on Heroku & Client on Netlify - Integrated both using proxy
  • Created Documentations

• Aniketh:

  • Created the Project Architecture
  • Created the frontend and react components
  • Graphql and mongodb Schema Design
  • Client and server integrations
  • Extensive code review

• Jessie:

  • Frontend (enhancing UI design using React)
  • Created working chat feature to be implemented in next release
  • Created backend for chat feature using sockets
  • Created frontend components
  • Created Documentations
  • Managing issues and tasks on GitHub

• Saphal:

  • Designed React components
  • Participated in brainstorming discussions & gave valuable inputs for designing backend
  • Provided solutions to various blockers

• 7. Where to find it:

• URL for GitHub: Quarantime