Coder Social home page Coder Social logo

harshjohar / stutea Goto Github PK

View Code? Open in Web Editor NEW
16.0 1.0 28.0 104.69 MB

Doubt clearing tool. Made during IDEATHON 2021 at PEC.

Home Page: https://stutea.vercel.app

License: MIT License

HTML 0.79% CSS 22.27% JavaScript 75.91% TypeScript 1.03%
beginner-friendly doubt-clearing mern reactjs express expressjs mongodb nodejs react

stutea's Introduction

StuTea

Built using

react mongodb express.js node.js Yarn

Inspiration

Coming from an engineering background (having attempted JEE), we know how important it is to get one’s doubts resolved as quickly as possible along with gaining a proper understanding of the concept.

Hence, we came up with StuTea where all students can get their doubts solved! :)

We provide a platform to get your doubts solved by other students/colleagues. It was a dream for a lot of introverted students who hesitated to ask about their doubts just so they didn't seem silly!

StuTea proposes to solve this problem!

Here the doubts will be solved by someone with similar knowledge and in simple language, making it easy to ask as many questions as you need until your doubt is resolved.

What it does?

StuTea is a one-stop solution to getting your doubts solved about various topics. Users can register and have an initial score of 1000 credits that they can redeem when their doubts get successfully resolved. This would transfer credits to the account of the person solving doubts. This provides an incentive to the one solving doubts.

The questions will be sorted using tags. The tags will help the one solving doubts to anchor his areas of expertise and solve doubts effectively.

Once the doubt is resolved, the user will get a notification through which they can check the answer and rate the person who solved it. This would help in keeping track of good doubt solvers and eliminate the ones who don’t provide quality answers.

Features

User verification through email We make sure that genuine accounts are being registered here at StuTea. So, for every registration we send a verification e-mail through sendgrid thereby creating a new account.
Notifications Once the user’s question has been answered, they will get a notification on their profile which would lead them to their question.
Credit system This is the most crucial aspect of StuTea. Users can find their credit score on the dashboard. Credits are what would act as virtual money. For every question posted there is a deduction of 50 credits. If the user’s doubt is successfully answered, he would in return give credits according to the quality of the answer. If he rates the answer with a 3 or 3+ rating, 50 credits would be deducted from his account and 100 credits would be added to the account of the user who answered the question.
For ratings less than 3, 50 credits will be deducted from the one asking and 50 would be added to the account of the user who answered. The users who would be solving more doubts and gaining more credits could redeem them at our shop, where we provide a variety of StuTea merchandise!
Analytics in profile Users can view their previously asked questions, number of questions successfully answered, and average feedback of answered questions on their profile.
Shop At StuTea, users solving doubts with great efficiency will be rewarded with credits that they can redeem at the shop with various StuTea merchandise.
Tags Each question will be allotted tags which would help in sorting of doubts. This would help the person solving doubts to find questions in their field of expertise.
Efficient feedback system In order to keep track of the quality of answers to the doubts, we provide an efficient feedback system by the users asking doubts. The rest is in the future scope of the project.
Favourite tags Users can choose their favourite tags and use them to find various questions on their favourite topics.

Workflow and Learning

How we built it We started out by dividing work amongst the team members according to the existing resources and knowledge we had. We built our frontend using React framework. Major libraries used are react router-dom, react bootstrap, and react-paginate.
The web app is deployed using firebase service.

We have a separate repository for the backend of our web app. We made different schemas for catering data in our database i.e., MongoDB. We used node.js and express for creating the rest of our backend. The email authentication is done using nodemailer package and sendgrid. Backend as a service is running on heroku. Some dependencies used in backend are bcrypt, cors, crypto, express-validator, nodemailer, jsonwebtoken.
What we learned Throughout the development of this project, we learned so much. Going into it, we had a basic idea of what we were doing. Along the way, we learned in and about our tech stacks which were MongoDB, Express, React, Node.Js . Most of all, we learned that through perseverance and determination, you can make progress towards helping to solve problems in the world, even if you don't initially think you have the resources or knowledge.

What's next for StuTea

We would love some constructive feedback. This was a learning experience for us all and we would love to see how we could improve in both technical aspects as well as with our presentation.

As software engineers, we're never fully satisfied with the work. There are always more ways to make the product better, faster, more secure, accessible, etc. Here are some product features that we would love to implement in the future:

  • Use of voice medium and A/V recordings to answer doubts.
  • Involvement of real time monetary transactions to buy/sell credits.
  • A more equipped shop to induce business into the product.
  • Extending our existing one-to-one answering product to one-to-many version.
  • An efficient search mechanism which will include search by tags/question and much more.
  • We also aim to create an efficient feedback system to authenticate the credit/decredit system.

Contribute

This app is an open source project, to contribute you should follow these steps.

1. Fork the Repository

To contribute, fork this repository to your own github account.

2. Clone the project

  git clone https://github.com/harshjohar/stutea

Go to the project directory

  cd stutea/frontend
  OR
  cd stutea/backend

3. Install dependencies for both frontend and backend

  yarn install

4. Start the dev environment for frontend and backend separately

  yarn start

5. Start Coding

Resolve issues and send PRs.

stutea's People

Contributors

abhinavmalhotra01 avatar boomboss200 avatar dependabot[bot] avatar dhruv-bansal15 avatar edddo123 avatar evirusky avatar harshjohar avatar holoflash avatar ishwarendra avatar jaagrit10 avatar jklein23 avatar kanikakaur27 avatar mohit-vaswani avatar nikhil7174 avatar shreyansh-kankane avatar simrang19 avatar tejas-bankar avatar the-amazing-atharva avatar ugpec79 avatar

Stargazers

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

Watchers

 avatar

stutea's Issues

SEO of platform

Add the search engine optimisation in the frontend of platform

  • Try to follow all methods and conventions of seo
  • Attach your lighthouse score along with PR
  • Do no change any internal logic in backend for this issue
  • edit as much as it takes for the best seo

Alert while logging out

Alert the user and take confirmation before logging out of website.

Make a custom alert box.

Tags page change

When click on tag, the url changes but page does not, which is not expected behaviour.

Fix logout div in Sidebar

  • Logout button should remain as it is irrespective of page chosen.

  • Logout div when anything except Shop is selected
    image

  • Logout div when Shop is selected
    image

Adding LICENSE

Hey there!

I am a beginner her and found this repo while searching for issues and I saw that there was no LICENSE

I would like to work on this to add a LICENSE file !!

Email confirmation

Add email confirmation in backend, configuration of User model is already done accordingly.

Just remove the default true from verified property and fix the sendgrid part.

Implement Dark mode

  • Color Scheme is upto you, but text or any other popup should be clearly visible.
  • Share screenshot of all pages and all popups in your PR.

Nextjs pages setup

Can be assigned only after #136 closed.

  • make files accordingly to navigate through pages in nextjs as corresponding to the old react router routing
  • just add dummy pages for now

Allow cors

In deployment this issue is coming right up when we send any request

Screenshot 2023-02-03 at 2 59 28 PM

This is something to with core headers, find and fix it :redeyes:

Make Contact Us Card responsive

Currently at some point, content of card come out of it. Fix it and attach screenshots near each breakpoint (where you use media query).

Here is one example at 902 x 523
image

Another example
image

Add Hovering effects

  • Add hovering effects in sidebar/Navbar and some other places.

  • In the navbar (Add hovering effect and also a small text popup shown in second image. Text popup names should be as the route suggest (An example is: Favorites, notifications, credits, profile).

    image image
  • In the sideBar (Hovering effect should differ in atleast some way from the active page)

    image

Note that the icon in the contact button is missing. Fixing it comes under #96

Add API documentation in /backend/README.md

What all things to include in API Documentation:

  • An Overview which describes what API does.
  • Description of each API alongside with some examples wherever possible.
  • List down the status code and their meaning.

Label on Hover for NavBar

  • Current Navbar
    image

  • When user hover over any icon (on medium or bigger sized devices only) then a small textbox appear which describes that icon.

  • Icon Labels: [Favorites, Notifications, Credits, Profile] in order.

  • Label should look something like this
    image

Add icons wherever missing

Add icons in contact button and register button in the landing page itself.

  • Contact Page left sidebar Preview

    image

add spinner when user is logging in

Currently nothing happens when user clicks on submit button for logging in or signing up. Add a spinner until user is getting logged in/signed up.

Pages in nextjs app

Add the following pages

  • about
  • landing
  • contact

Create the following components

  • navbar

Do not change any designs or Layouts

Edit about page

Remove the existing contributors cards from about page.

Also, add a little description of project using the README.md.

Improve shop cards

  • Zooming in on hover is abrupt. Smoothen it
    image

  • add border-radius for image inside card

  • Add a shopping cart (or something related) icon in buy button.

  • Basic Card design (Item image can be non-circular, but make sure the edges are smooth)
    image

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.