harshcasper/allnotes

Democratizing Notes and Resources sharing with MERN Stack Development

Project Abstract 🙋

This Web Application powered by MERN Stack will be making use of intuitive User-Interface and User-Experience to allow Students to come onto a One-Stop Portal and share Resources and Notes related to their Syllabus and Subjects which can benefit the Society as a whole. An integrated PDF-Viewer would allow the other students to check out the Resources and upvote a User depending on the usefulness of the Resources shared from his part. This Social Application would allow Students to connect over their love of Subjects and helping out of the Community in an effective way, benefitting a lot of Students in the longer run.

Project Background💡

In Majority of the Colleges and Universities across India, Notes Sharing is done in Private WhatsApp Groups and Telegram Channels which often lead to other students missing out on important notes during Exam-Times. A One-Stop Solution can be to bring up an Application where Students can drop down their Notes for Public View, that can be accessed by anyone.

To make it a gamified experience, other Users can upvote the contributions done by the Contributors which can be “rewarded” in terms of Credits and more. We will also be working on adding more features to the Project, like specifying the nature of Notes and to whom it benefits the most which would allow the other User to filter and view specific content.

Technology Stack 🛠️

• Coding Languages: Javascript (MERN Stack)

• Tools & Technologies: React, MongoDB, Express, NodeJS, Amazon Web Services, Postman, Jest, Github Actions (CI/CD)

• Project Management Tools: Trello, Git/Github, Markdown (Documentation)

Learning Resources 🧰

• Complete Intro to React, v5

• Intermediate React

• Introduction to MongoDB

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

License📜

MIT License

allnotes's Issues

Develop a User Profile Page for the Application

Description

Develop the User Profile Page of the Application.

Tutorials

• User Profile Page in ReactJS

Wireframes

We don't have any wireframes as such for the purpose of the Landing Page. If you would like to come up with your design, please have a consultation with me on the basic features before you move ahead with the same. Since @pooja-gera has designed the previous pages as well, she might be better able to advise on how the profile page would look.

Branch Policy

Make this PR on the dev branch. We need to deploy the same to denote the upcoming status of the application.

cc: @harsha14gupta @priyalweb Let me know if you would like to work on the same. If yes, please self-assign this Issue using the Assignees option on the Right.

Design a Profile Page for the Application

Description

Design a Profile Page which consists of the User Details along with the Notes they have uploaded.

Contributors Guideline

• Submissions should be made in an apt form so that Web Developers can work on them seamlessly. Make the PRs to the design/ directory with the Adobe XD/Figma Files and a JPEG/PNG of them as well. Have separate folders for each page.
• The task is open to creativity. You can combine modern UI/UX philosophies to come up with your own design.

Add Update Profile + Delete Profile Option

Description

Add Update Profile endpoint and Delete Profile endpoints.

Update Profile

@route POST api/profile/me
@desc Create your own profile (and if profile already exists then update it)
@access Private

Delete Profile

@route DELETE api/profile/me
@desc Delete profile, user
@access Private

Setup the Application Database

Description

Develop the Landing Page of the Application.

Tutorials

• MongoDB Atlas Tutorial: Set Up a Free Tier Cluster & Import Your First Collection
• How to connect to MongoDB Atlas using Node.js

Branch Policy

Make this PR on the dev branch.

Create a route that shows that the Database Connection is successful and have a .env.example file when you make a PR which has some necessary documentation on what the user needs to fill and set up a Database Connection.

cc: @aarushivij @Aaliya7516 Let me know if you would like to work on the same. If yes, please self-assign this Issue using the Assignees option on the Right.

Add auto-update contributors table

Documentation

Giving credits to contributors in README.md file
Like this

Develop the Landing Page of the Application

Description

Develop the Landing Page of the Application.

Tutorials

• A Responsive Landing Page with React
• Creating a Landing Page with React

Wireframes

We don't have any wireframes as such for the purpose of the Landing Page. If you would like to come up with your design, please have a consultation with me on the basic features before you move ahead with the same. Since @pooja-gera has designed the previous pages as well, she might be better able to advise on how the landing page would look.

Branch Policy

Make this PR on the main branch. We need to deploy the same to denote the upcoming status of the application.

cc: @manikajain11 @m-code12 Let me know if you would like to work on the same. If yes, please self-assign this Issue using the Assignees option on the Right.

Add DeepSource Static Code Analysis

Description

Add DeepSource Static Code Analysis on this Repository.

Additional Details

• Fork the Repository (If you haven't already)
• Go through the official Documentation
• Setup the deepsource.toml on the Root.
• Make a PR.

I will activate the analysis from my end to find Bugs and Anti-Patterns at every push.

Design a Dashboard Page for the Application

Description

Design a Dashboard Page where they can see all uploaded Notes. It can be as minimal as possible since we are yet to finalize the features.

Contributors Guideline

• Submissions should be made in an apt form so that Web Developers can work on them seamlessly. Make the PRs to the design/ directory with the Adobe XD/Figma Files and a JPEG/PNG of them as well. Have separate folders for each page.
• The task is open to creativity. You can combine modern UI/UX philosophies to come up with your own design.

Design a 404 Page for the Application

Description

Add a 404 Page to keep a visitor on your site even if he/she hits a page that doesn't exist. This would also help us to change the Bad User experience to a positive one by adding some links to that 404 page so that the visitor can navigate to some other page.

Contributors Guideline

• Submissions should be made in an apt form so that Web Developers can work on them seamlessly. Make the PRs to the design/ directory with the Adobe XD/Figma Files and a JPEG/PNG of them as well. Have separate folders for each page.
• The task is open to creativity. You can combine modern UI/UX philosophies to come up with your own design.

Implement the complete Login and Signup Feature

Description

Integrate the Login and Signup APIs with the Login and Signup Screen.

Signup Route

The Signup Route should be refactored to this:

@route POST api/users
@desc Register user
@access Public

This must be a public route, implies no verification is required to access this route.

Login Route

@route POST api/users/login
@desc Login user
@access Public

Miscellaneous

Rest all routes should be private and should not be visible unless the User is logged in.

Create an Application Logo

Description

Currently, we need a Logo for our Application which would be used on our Web Application Interface.

Tools

• Figma
• Adobe XD
• Adobe Photoshop

Additional Details

Logo Designs must be added in an appropriate form on the assets/Logo-Design/ Directory. The basic criteria we are looking for are:

• The logo should be optimized to a 500x500 Pixel Size.
• Transparent Background must be used.
• Design Philosophy should be documented in the PR.

Create Issue + PR Templates

Description

Create a custom Issue and Pull Request Template.

Additional Details

• Make an Issue Template. Any new Contributor must be able to specify if it is a new script or enhancement to an older one. It should also be specified which language he is coding it in.

• Make a Pull Request Template. Any new Contributor must be able to specify if he has met all the requirements like Clean Code, proper README and Documentation, Screenshots (If any) attached and more.

You can take inspiration from here and check this out to know how to achieve the same.

Add a Github Action to auto-assign Contributors

Description

Add a Github Action to auto-assign Contributors. The Contributors can just type /assign and the Issue would be assigned to them by a Github Bot.

Setup the Create-React-App Template

Description

Setup a Create React App Template. If this is the first time, you will be using React, let me share some information about it.

Create React App (CRA) is a toolkit that is generally used for setting up React Application with ease along with a lot of features, with a unified CLI. Feel free to read about it on the official Github Repository and on the Docs. This Article can give you more depth about what you will be dealing with.

Tools

• Terminal
• NodeJS
• NPM

Directory Structure

You are supposed to fork the repository and create a branch where you will push your changes. Don't push the entire App on the Root. We will follow this directory structure:

- /client 
-- /src
...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

- /server
- /models
-- item.js
- /node.modules

The Frontend Code will be in a client directory while the Backend Code will be in the server directory. Keep all the Frontend Code on the Client Directory which you will be supposed to create. Take a look at the Boilerplate Code and replace it with a simple Heading Tag which says: All Notes App.

Finalize the Minimal Viable Product Features

Description

Finalize the Minimal Viable Product Features. We received a lot of feedback on the potential product features, but we need to shortlist a certain set of features, which would be our baseline for development and deployment. All the Product Perspectives would be available over the Notion Workspace, so if you want to work on this Issue, take a look at them and decide the MVP Features.

Document the set of features in a Markdown File and make a PR to the docs/ directory with the filename as the ROADMAP.md. If you want further clarity on this Issue, feel free to drop me a message on Slack.

Develop the Login-Signup Portal

Description

Develop the Login/SignUp Pages for the Application.

Tutorials

• React Hooks + Redux - User Registration and Login Tutorial
• Build React Login & Sign Up UI Template with Bootstrap 4

Wireframes

Thanks to @pooja-gera for these awesome wireframe designs.

Branch Policy

Please make the PR on the dev branch instead of the Main Branch.

cc: @pccoder-2000 @pooja-gera Let me know if you would like to work on the same. If yes, please self-assign this Issue using the Assignees option on the Right.

Create a User Model and Login-Signup Portal

Description

Developing the User Schema of the Application and Login-Signup endpoints.

Tutorials

• Creating the User Model

Branch Policy

Make this PR on the dev branch.

You may test the User Model against a local Database, since there would be another issue to setup a MongoDB Database using Atlas and setting a route to validate that.

cc: @saloniankita @Sonali12920 Let me know if you would like to work on the same. If yes, please self-assign this Issue using the Assignees option on the Right.

Setup the NodeJS and Express App

Description

Setup the NodeJS and Express Template. There are a lot of NodeJS and Express Boilerplates available on Open-Source here and you can feel free to pick any one of them.

You can create your template, by following this article and have a simple API Route that returns a sample JSON Message.

Tools

• Terminal
• NodeJS
• NPM

Directory Structure

You are supposed to fork the repository and create a branch where you will push your changes. Don't push the entire App on the Root. We will follow this directory structure:

- /client 
-- /src
...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

- /server
- /models
-- item.js
- /node.modules

The Frontend Code will be in a client directory while the Backend Code will be in the server directory. Keep all the Backend Code on the Server Directory which you will be supposed to create. Take a look at the Boilerplate Code and replace it with a simple route that returns a JSON message.

Setup the Application on Vercel + Add App SEO

Description

• Deploy the Frontend on Vercel for now
• Make it better in SEO Terms
• Research about SEO optimization using ReactJS
• Make the Content for the Webpage and Landing Page (Once the Landing page is merged)

cc: @saloniankita @aarushivij

Design a Splash Screen

Description

Design a Splash Screen which can either an animation or a GIF which can serve as a loading screen to give the end-user immediate feedback that an application is starting and loading in the background.

Contributors Guideline

• Submissions should be made in an apt form so that Web Developers can work on them seamlessly. Make the PRs to the design/ directory with the Adobe XD/Figma Files and a JPEG/PNG of them as well. Have separate folders for each page.
• The task is open to creativity. You can combine modern UI/UX philosophies to come up with your own design.

Create the Login/Signup Page Design

Description

Create the Login/Signup Page Design in a widely-supported Design Software (Adobe XD/Figma).

Contributors Guideline

• Submissions should be made in an apt form so that Web Developers can work on them seamlessly. Make the PRs to the design/ directory with the Adobe XD/Figma Files and a JPEG/PNG of them as well. Have separate folders for each page.
• The task is open to creativity. You can combine modern UI/UX philosophies to come up with your own design.

Add a Contributors Guideline

Description

Create Contributors Guideline to help new Contributors get started with this Project.

Additional Details

• Add a CONTRIBUTING.md to allow new users to get started with knowing how to contribute.
• Add Screenshots wherever possible.
• Add the basic information about creating Issues, Pull Requests and Branching.
• Mention tutorials related to Git and Github to help them better understand.

You can use the content on the Notion Workspace as a reference for the Tutorial Links.

Add a Github Action to auto-assign Mentors for every PR

Description

Add a Github Action to auto-assign Mentors for every PR. It is a pain sometime to take a look at all the Projects for the PRs made by the Contributors. Getting a nice notification about reviewing a PR would make things easy for me.

You can take a look at this Github Action for the purpose. Check this out to know how to achieve the same.

Add a Code of Conduct

Description

Create a Code of Conduct which the Mentors and Participants must abide by.

Additional Details

• Mention the Standards which everyone should abide by on welcoming and inclusive language including constructive criticism.
• Add the required responsibilities for Project Maintainers.
• Mention the Scope of this Code of Conduct.

Develop the 404 Page of the Application

Description

Develop the 404 Page of the Application.

Tutorials

• User Profile Page in ReactJS

Wireframes

Branch Policy

Make this PR on the dev branch.