purnima143/kurakoo

Kurakoo is an online community of people providing answers to questions just like Quora site. Kurakoo is especially for school-college students, people from around the different colleges visit Kurakoo to ask questions from a community of people who answer them.

Kurakoo is a website where you can make friends (safely) and learn more from people you trust. It is an online community of people providing answers to questions, just like 'Quora'. Kurakoo is specially catered to meet the needs of school/college students. Students from different colleges/universities around the world visit Kurakoo to ask questions to a community of people who are always ready to answer them.

Project Background💡

In the majority of the colleges and universities across India, thousands of students have many doubts and queries from "Which branch to choose?" to "How to crack interviews?". Kurakoo is a one-stop solution for all these problems. It serves as a platform where students can drop in their questions for public view and any person from this vibrant community can help by providing answers to these questions.

 

Areas of Collaboration 👨‍🏭

Project Managers, Developers, and Designers would be collaborating on various domains like:

• UI Prototyping with figma tool figma design.

• Front-End Development with ReactJS

• Developing Backend APIs with NodeJS and MongoDB

• Working on a NoSQL Database Management System

• Working on a User-Experience rich platform for a Social Cause

This would be an enriching experience for all Student Developers, Project Managers, and Designers.

Technology Stack 🛠️

• Coding Languages:

• Tools & Technologies:

• Project Management Tools:

Flow of the site 💻

Below is a basic idea as to how the website works. We will also be working on adding more features to this project, like sharing of questions, an option to follow people, a feature that allows users to filter and view specific content, etc.

General Guidelines 🎯

• Before working on any issue, kindly go through the instructions given in the contributing and readme the file carefully.

• For each issue, a detailed explanation is mentioned in the issue ticket itself, for more details refer to figma design.

• While making any component, make sure that the code for the all generalised/common components is kept in src->components->common folder.

• Kindly keep the source code in the src->components folder while making specific components.

• Please make sure to adhere to the folder structure of the project.

We will also be working on adding more features to this project.

Setup Guidelines

Clone the repository -

git clone https://github.com/purnima143/Kurakoo.git

Backend

1. Run cd server on your CLI.

2. Create a .env file and paste the MONGO_URL, node environment and email for nodemailer in the given format

   MONGO_URL = <your_url>
   NODE_ENV = development
   USER_MAIL=<Enter your mail-id from where you want to send the mails>
   MAIL_PASSWORD=<password of the entered mail-id for the authentication>
   

   or

For the MONGO_URL, We have added a string for the local mongoDB connection inside index.js mongodb://localhost:27017/kurakooDB

Note: See the .env.example file for further clarity

_NOTE: To get the MONGO_URL, take a look at this article for reference [Connection String URI Format](https://docs.mongodb.com/manual/reference/connection-string/)_

3. Install the dependencies by running

   npm install
   

4. Run the server

   npm run server
   

   Link for the screenshots, how to setup backend locally are kept in assets->backend folder.

Frontend

1. Run cd client on your CLI.

2. Install the dependencies by running

   npm install
   

3. Run the server

   npm start
   

NOTE: To run the Frontend side of the application is recommended to run the backend server too.

Start Frontend & Backend simultaneously

1. Navigate to the root folder i.e. Kurakoo.git

2. Install the dependencies by running

   npm install
   

3. Start Frontend & Backend simultaneously

   npm run dev
   

Unit Testing

1. Currently we are working on the implementation of unit-tests.

2. This will improve the our codebase & help to manage all the wierd cases.

3. We are using Mocha & Chai for the unit-testing. We welcome you, for helping us to improve test casing.

Open source contest

Girlscript Summer of Code 2021: The GirlScript Summer of Code is a 3 month long Open Source program conducted every summer by the GirlScript Foundation. It was started in 2018 to help beginners to get started with Open Source Development while encouraging diversity.

Learning Resources 🧰

• Figma for Developers

• Git Documentation

• GitHub Guides

• How to think in react

• React Documentation

• React Routing Video

• Top 5 Skills you must read before working with react

• Complete Intro to React, v5

• Intermediate React

• Introduction to MongoDB

• API Design in Node.js (using Express & Mongo)

• For testing go through the documentaion of Mocha & Chai

License📜

MIT License

Project Admin 📆

Purnima Sharma

Project Mentors 👨‍💻

Ahmed Mawia

Ishu Raj

Vivekkumar Javiya

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

kurakoo's Issues

code of conduct

This project lacks a code of conduct file so would like to add that.

please assign me as part of gssoc'21.

Will like to update the tech stack section ( with logo )

I will like to add the tech stack section with their particular logo this will make the read me file more attractive !! Will start to work as soon as I get assigned !

Change the favicon and signIn issue

Describe the bug

->to change the favicon logo as well as the text
-> on clicking the "Sign In" we should be redirected to the sign in page

Possible solution

->add image and text
->use LinkTo

Screenshots

I would love to work on the front-end part

As a GSSoC'21 participant I would love to make my contributions by making some of the landing pages and components same as the figma slides for the Kurakoo :)

Will like to add automatic contribution updater

I will like to add a feature which will add a contribution section in read me which will be updated automatically !! Will start to work as soon as I get assigned !

Dockerize various modules

Is your feature request related to a problem? Please describe.

This issue will deal with Creating Docker images and compose.yml files for following modules:-

• React frontend
• Node server
• And MongoDB

Describe the solution you'd like

I'll start working on this one once the basic setup for backing and mongoDB is done.
@purnima143 could you please assign me this ?

Frontend: Create a reducer for Alerts

Is your feature request related to a problem? Please describe.

• Creating a Alert reducer would be helpful to use whenever we want to add a alert in frontend.

Describe the solution you'd like

• I will create a alert reducer that would call whenever we want to use a alert.

@purnima143 could you please assign this to me ?

Front end: Feed Page

Adding Footer with some styling (Frontend)

Footer will be having contact information and other basic things which standard footers have with some styling to it with color code closely related to our logo.

[Design] - UI Design for Notifications Page

Is your feature request related to a problem? Please describe.

• For the 'notifications page', there are no UI designs.

Describe the solution you'd like

• This page's UI designs are something I'd like to focus on.

Discussion,general queries regarding Project

Hello folks,
Thanks for showing your interest in this project😊. As you all know this project comes under Girlscript Summer of Code 2021 open-source program, that's started today 🎉✨
Below are the following instructions, please read carefully:

• This project has nothing to do with existing directories and files. One issue will be created regarding the setup of the directories for both FRONT END and BACK END. Please,don't create the same issue again and again.
• Designers: Please create an issue with the proper issue title Eg: "Design: Creating Feed page".Please work on this figma file only otherwise your contribution won't accept. Add the images in the assets folder of the repo.
• Developers: Please mention the field before creating an issue, if it's of front end write "Front end: Login form" in the issue title and similarly for the backend.
• Contributors: Everyone please create a valid issue name and branch. Before working on any issue kindly go through the instructions given in the contributing and readme file carefully.
• For any queries comment below, use it as a group discussion inbox. If you guys wanna give any advice regarding the project then you are welcome🙂.
• Let's work on this project as a Team project😊👩‍💻👨‍💻✌

Doc: Add project setup guidelines

Proposal

Many developers are having trouble setting up the project in there local machine for which I would like to add some Setup Guidelines for both the frontend and the backend.

@purnima143 Could you assign this to me under GSSOC'21?

A group based on college of the user

I am a GSSoC'21 participant
There will be groups for different colleges. When a user will sign up He/She can join that group. It can act as an alumni network and will help students to get a better insight into the placements in their college. Alumni can also share how they applied for it and how they prepared. It will come under the Placement category. It will help to clear the doubts in a better way.

Design:Main feed page(Post card for asking questions)

• UI Prototyping with figma tool figma design.
• Please follow the 3 primary colours - #FFBB00 ,#FF6F00 ,#411818 for designing the pages

Content for Feed page: Post card

- Name
- Questions ask
- answer,like,share button
- date of post

Take reference of below design

Any queries?

You can comment it here or in Figma file

Setup linters to the project

We should setup .eslintrc and .prettierrc for the project, so that all the developers can follow a systematic way of coding with conventions.

The linting would be on the basis of Airbnb JS Style Guide which would include points like

Prettier

• Tab Width Index: 2
• Semi Colons: True
• Single Quote: True
• TSX Single Quote: True
• Arrow Parenthesis: Always to be used
• Bracket Spacing: True

Eslint

• Give error if any prettier conflict
• Unused Variables: Warning
• Multi Assign: On
• Return - await: On

Suggestions are welcomed for more of the lints based on the Airbnb Style Guide

@purnima143 Could you assign this to me under GSSOC'21?
And kindly add the relevant labels too

Backend : Create User schema

Problem/Context

Once the folder structure for the back-end is created and some basic boilerplate code is added, we start the back-end development part and create some APIs and work with data which we retrieve from or add into the database. To work with the database, we initially create a skeleton/blueprint of what the related data should look like for eg. what all fields should be there in the details of all the users, questions, etc and what should be their data types and so on. Schema does this task for us hence we need a blueprint for the user details written in the form of a schema.

Description

Create a mongoose schema for the user details which will contain the fields:

• Name - String
• Email id - String
• Password - String(hashed password using bcryptjs)
• Year/sem - Number
• College - String
• friends - array(initially empty) of ObjectIds which will look into the 'User' model specified in the ref option.

Some other fields such as questions asked, answers given, etc can be added later when the schema for questions is created so the user schema is subject to changes in the future.

References/Acknowledgement

Issue #3 for user details

Backend: Setup a response handler for the API

The response handler is a helper function and for that, we can put this under the helper's directory.
The benefit of this is for front-end developers working on this project, for which fetching appropriate data from the endpoint would be easier and well structured.

The Response Handler should be of this structure:

{
    success (Boolean): If the data is successfully retrieved then it should be "true", otherwise it should be "false".
    code (Integer): Appropriate status code of the API call like 501 for bad request, 200 for OK, etc.
    message (String): Message describing the action performed like "Post Created Successfully", "Failed to Create the Post", etc.
    data (Object): Return the data in this field if retrieved successfully, otherwise it should be "null"
}

Can I work on this?

Redesigning the Feed page in Figma

Is your feature request related to a problem? Please describe.

• The feed page's design can be improved

Describe the solution you'd like

• The background of the Logo should be transparent
• The search bar should be positioned and Add a search icon
• The elements in Navbar can have icons

addition of issue and pr templates

can I work on this as part of gssoc'21?

Adding various security features

Setting various HTTP headers using helmet
Data sanitization against no SQL injection and XSS
Rate limiter so the server won't get overload

If you find it relevant, please assign me.

Frontend:Post Question page(gssoc21)

Proposal

I would like to design post question page as gssoc21 participant

A Very First Welcome Page of this website with interactive {html,css,javascript,react}

contents:-

1. login option.
2. create account option.
   • both 1 and 2 will redirect to login/signup page
3. 3.contact option which you will edit later.
4. Animated welcome page of this website.

Frontend : Setting up react redux

Description

As the project is in it's initial phase so it would be helpful for further state management task if we can setting up react-redux now.

Additional

@purnima143, if you approve this issue, could you please assign me this.
I would love to contribute to this project under GSSOC2021.

Proposal: Developing Authentication API Endpoints

Proposal for the User Authentication API Endpoint development.

For the Authentication of the application following APIs need to be created

• /user/signup
• /user/signin
• /user/forget-password

The task breakdown for the authentication function as follows.

• create User Schema
• develop user signup endpoint
• develop user signing endpoint
• develop forget-password endpoint

(GSSOC'21) Navbar for website

hello @purnima143

As a gssoc participant i would like to work on the navbar for the website,
I will include everything that has been mentioned in the figma.

I would like to work on the navbar for feed page. Can you please assign it to me.

Discussion on backend.

I would like to work on the backend of this project. Can we have a discussion on the requirements?

Backend: signup/login API

for these APIs, we need to first connect the database, so I would be happy if this would assign to me.

Design: Add Post question page

• UI Prototyping with figma tool figma design.
• Please follow the 3 primary colours - #FFBB00 ,#FF6F00 ,#411818 for designing the pages

##Take reference from the below design

Any queries?

You can comment it here or in the Figma file

chore: add to issue templates.

Deliverables

• Bug Report
• Feature request
• pull request template

Backend: need improvement in index.js file

There are some things that need to be modified in the index.js file

greeting bot integration

his bot basically greets someone who opens up an issue or makes a pr for the first time in the repo

download the bot from here, and I will be adding an extra file for showing custom messages

https://github.com/apps/welcome

@purnima143 would like to work on it

Add Google Authentication to SignUp!🚀

@purnima143 After the Completion of Signup/SignIn , Just I will Add the Auth to the , So they can Easily login using Google , Github , Linkedin , And also we can Get the users data with permission
You can Assign this to me After complletion of singup form

Creating a Sign up page(GSSoC 21)

Proposal

(A clear and concise description of what the proposal is.)

The webite of our project will be containing a sign up pagte in order to create an account.
it will ask for important information like name, mobile no, city, country etc
it will ask to make a username and a password

Backend: Setup for Backend(server)

Need a proper setup for backend(server) . All the directories present are not working because of some issue. I want anyone to help in this issue that has a proper backend folder/files from scratch. So that other contributors can start working on Backend without any bugs and errors.

Frontend : Sign In Page | GSSOC21

Context

A Sign In page for the existing user.

Description

Create a sign in form for the website which will take the following details as input:

• Email id
• Password
• Sign In button
• Social Media Sign In buttons it required.

Show an appropriate message to the user if the user details do not exist in the database and ask them to create an account first.

@purnima143 could you please review this issue and assign it to me?

Minor grammatical errors in the README.md file.

There are minor grammatical mistakes that needs to be corrected which will enhance the file.

Design: Make feed page(Categories and follow part)

• UI Prototyping with figma tool figma design.
• Please follow the 3 primary colours - #FFBB00 ,#FF6F00 ,#411818 for designing the pages

Content for Feed page: Categories

- Categories on left side

Content for Feed page: Follow others

- List all user names with profile pic on right side

Take reference of below design

Any queries?

You can comment it here or in Figma file

I would like to work on the frontend using React JS

I have already made a similar project, do check it out Edu App.
But it was built using React + Firebase tech stack. As your project is using node and express in the backend, I would like to work on frontend part using React JS and build a neat UI using bootstrap and framer motion. We can get started with basic features to be added and as we move on, we can add more features.
#GSSOC21

Start the server and client together

Is your feature request related to a problem? Please describe.

We need to start the frontend and backend separately. This should be fixed

Describe the solution you'd like

Use concurrently

Front end: SignUp form

Context

Whenever a new user visits the website, the very first thing he/she would like do in order to get started will be to sign up. Hence a SignUp form must be created so that new users can register themselves and start using the features of the website.

Description

Create a signup form for the website which will take the following details as input:

• Name
• Email id
• Password
• Confirm password
• Year/Sem
• College
• Signup button

Show appropriate message to the user on invalid email, not matching passwords and other cases whenever necessary.

Acknowledgements/References

Issue #3 for the input content for sign up form

Change the favicon and text

Describe the bug

• A clear and concise description of what the bug is.

Possible solution

• Describe the solution you thought of.

Screenshots

• If applicable, add screenshots to help explain your problem.

Custom scroll bar

The website is quite soothing and has a great UI but the lack of a custom scrollbar makes it look incomplete as the default one doesn't go well with the UI

Remove warings in the signUp.js showing in the console

Describe the bug

The signUp page is compiled successfully but has a lot of warnings.

Possible solution

can be fixed

Screenshots

Design:Profile page

• UI Prototyping with figma tool figma design.
• Please follow the 3 primary colours - #FFBB00 ,#FF6F00 ,#411818 for designing the pages

Content for Profile page

- Profile pic with camera icon at the bottom right corner of the pic
- Cover photo
- Name
- College
- Year/Branch
- Question ask tab
- Answer tab
- Follow button 

Take reference of below design

Any queries?

You can comment it here or in Figma file

Design a Landing/Home page for the website

Is your feature request related to a problem? Please describe.

The website currently does not have a Landing page to explain what it is

Describe the solution you'd like

• The solution is to design a Landing page

Design: Signup & login page on figma

• UI Prototyping with figma tool figma design.
• Please follow the 3 primary colours - #FFBB00 ,#FF6F00 ,#411818 for designing the pages

Content for signup

- Name
- Email id
- Password
- confirm password
- Year/sem
- College
- Signup button

Content for login

- Email id
- Password
- Login button

Any queries?

You can comment it here or in Figma file

addition of welcome bot

this bot will welcome and greet anyone who opens up an issue for the first time in this repo or makes a pr.

would like to work on this as part of gssoc'21

Design:Question page

• UI Prototyping with figma tool figma design.
• Please follow the 3 primary colours - #FFBB00 ,#FF6F00 ,#411818 for designing the pages
• After clicking on a particular question, a separate page should appear which will have the person name who asked the question,date-time, question, all the answers and a like/dislike button.

Take reference from the below designs

Any queries?

You can comment it here or in Figma file

Auto Page Scroller Button

Is your feature request related to a problem? Please describe.

• When a user is at the end of the page and the page is long then it becomes a tedious job to scroll all the way up. In such situations, an Auto Scrolling button comes in handy.

Describe the solution you'd like

• Addition of an Auto scrolling button to the right bottom corner so that when the user clicks it they'll be taken to the top of the page.

How to setup the application in local machine

We can provide in the readme of this project how to setup the project locally in our machine.