Giter VIP home page Giter VIP logo

bunk-manager-mern's Introduction

BUNK MANAGER

Screenshot (138)

Tech-Stack

React MongoDB Express.js Nodejs

Other Libraries

JsonWebTokens Bcryptjs nodemon concurrently

How To Run the Project

There are two ways to install the project:

1. Conventional Way

1. Open Project Folder

2. To install all dependencies open Command Prompt and run

npm i

3. To install all client dependencies open client folder and again run

npm i

4. To run the server-

npm run server

5. To run the client-

npm run client

6. To run both server and client- Recommended

npm run dev

2. Using Docker

  • Install Docker, from the given link.

  • Once Docker is installed, use the following two commands to run the app in the root dicrectory:

    • docker-compose build , This command will build the project
    • COMPOSE_HTTP_TIMEOUT=200 docker-compose up, This command will run the container.
  • You can open the project on localhost:3000 on the machine.

Note: If you are using docker-desktop on Windows Or WSL2 i.e Windows Subsystem For Linux, you can use the GUI Options to run the containers

To start contributing, follow the below guidelines and Code of Conduct:

1. Fork this repository.

2. Clone your forked copy of the project.

git clone --depth 1 https://github.com/<your_user_name>/bunk-manager-mern.git

3. Navigate to the project directory ๐Ÿ“ .

cd bunk-manager-mern

4. Add a reference(remote) to the original repository.

git remote add upstream https://github.com/ADRE9/bunk-manager-mern.git

5. Check the remotes for this repository.

git remote -v

6. Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).

git pull upstream master

7. Create a new branch.

git checkout -b <your_branch_name>

8. Perform your desired changes to the code base.

9. Track your changes:heavy_check_mark: .

git add .

10. Commit your changes .

git commit -m "Relevant message"

11. Push the committed changes in your feature branch to your remote repo.

git push -u origin <your_branch_name>

12. To create a pull request, click on compare and pull requests. Please ensure you compare your feature branch to the desired branch of the repo you are supposed to make a PR to.

13. Add appropriate title and description to your pull request explaining your changes and efforts done.

14. Click on Create Pull Request.

Landing Page prototype

Website: https://www.figma.com/file/yv7szBhuylAeMShJoNY7oF/BUNK-MANAGER?node-id=0%3A1

App: https://www.figma.com/file/sd8f5twPt3iCrMGPX2izFa/BunkManagerApp?node-id=0%3A1

Login Page prototype

https://www.figma.com/file/BBOPzTwcLPLc8B3HckxQqH/Login?node-id=0%3A1

Sign Up Page prototype

https://www.figma.com/file/Bag7fzf5w2NlrROsILCi91/SignUp?node-id=0%3A1

About Us Page Prototype

https://www.figma.com/file/az4dLzkdf2ODaDaFK7vdb9/AboutUsWeb?node-id=0%3A1

Today Page prototype

https://www.figma.com/file/ztcjLs33fX0k7dAY3SkCW0/Today?node-id=0%3A1

Subject Details Page Prototype

https://www.figma.com/file/8JiFfRS746ot9w7Uh7yq3O/Untitled?node-id=0%3A1

Bunk Manager Mern is a part of these Open Source programs


Contributor:

Credit goes to these people: โœจ

Live version also available HERE

bunk-manager-mern's People

Contributors

abhay27chauhan avatar abhishek765 avatar adre9 avatar ameyajain-25 avatar anhushree avatar anjalipatle avatar arpita309 avatar artistic18 avatar aryamanz29 avatar ashish-github2495 avatar deeptea22 avatar dig9074vijay avatar firequeen-3010 avatar garvitgupta13 avatar gurshehzadsingh avatar imgbotapp avatar jainaayush01 avatar kunaljain0212 avatar lopamudra2000 avatar muditxofficial avatar mustafiz04 avatar promaroy avatar rishabhborn2win avatar rohan-kulkarni-25 avatar sahu-01 avatar sanyam2000-dot avatar saptar001 avatar subham142 avatar udaymittal7 avatar vtejaeta 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

bunk-manager-mern's Issues

Creating an issue template for the project

Hey. I was wondering if it would be helpful to add an issue template. If you plan on having a template for this project then please assign me this issue as I'd like to work on it as a GSSOC'21 participant.

Update the Tech Stack of the project in Readme

Deliverables:
Add the deliverables with their description here.

  • Update tech stack to MERN in readme.md file.

Screenshots
Add any relevant screenshots to show how the elements look or works currently/how the enhanced element should look or function.

Info icon in Cards not working

image
I can work on this issue as a GSSoC participant.
if it doesn't necessary we can remove this feature, or if this feature is required I can work on this.

Redesign the UI/UX of the App for landing page

We need to rethink the UI/UX of the MERN stack app for the desktop. So we need experienced designers who are good at using FIGMA or Adobe XD. And create an overall UI of the App so that we can create and modify components according to it. @Mustafiz04 and @Sanyam2000-dot can you look for experienced participants for it? Contact me as soon as you get one.

We can add "Get in touch section" in the footer.

Deliverables:
We can have a footer with Get in touch section ... you have option to fill name, email and message which will go directly to the admin.
Like the screenshot i have attach ...
if you like the idea I would like to contribute as GSSOC'21 participant.

Screenshots
Screenshot (15)

Using Docker to remove the setup hassle!

Is your feature request related to a problem? Please describe.
We can consider using docker to reduce the setup hassle developers!

Describe the solution you'd like
This can be an alternative way for setting up keeping the standard way intact!

Footer Icons are not syncing with dark theme

Deliverables:
The footer icons are not synced properly with themes

Screenshots
See the Issue:

image
image

I will fix it soon, kindly assigned me this issue so that I can create the PR for the same.

Add mongoose event listeners

Required is to add event listeners at DB connection file

mongoose.connection.on('connected', () => {
     console.log('DB Connection Established')
 })

This is example of event listener when DB is connected.
Also have to add for Disconnected, Re-established, connection closed and throw error while some error occurs.

Have any doubt do ask her freely.
Good Luck.

Initial Connection errors are not handled

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

snippet of you code -

mongoose.connect(dbURI, {useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true, autoIndex: true, useFindAndModify:false}); 

mongoose.connection.on('error', function (err) { 
    console.log('DB connection error: ' + err); 
  });

read this pls, the error handling part -
https://mongoosejs.com/docs/connections.html#:~:text=If%20initial%20connection%20fails%2C%20Mongoose,after%20initial%20connection%20was%20established.

you have handle two errors -

if promise is rejected -> using the above code i have proposed
error after initial connection is made -> using the event handlers

Describe the solution you'd like
will use try/catch along with async/await for handling the initial connection error.

Logo name hides in small screen

Screenshot from 2021-03-09 21-28-12

The logo name is not perfectly adjusted when the browser width get's less or in nearby tab mode due to the navbar items.
I would like to solve this issue under GSSoC 21' as being a participant.
Please assign me this issue

Production Error Heroku

Describe the bug
Bug:-Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-fSIMeQ9UIERL5ZqyJ76EFbfgakiTkW6MdrhTf01vKvg='), or a nonce ('nonce-...') is required to enable inline execution.
Go to the live link :- https://salty-brook-29410.herokuapp.com/

Screenshots
Screenshot (249)

Desktop (please complete the following information):

  • OS: Windows
  • Browser Edge

Create the Web App Logo

Deliverables:
Add the deliverables with their description here.

  • Design the Logo and ask for review.
  • Integrate the logo along with the favicon in the codebase

Change default favicon

Hey!
I noticed that we still have the default favicon that comes with React boilerplate code. I would to like to change it to the one that fits our theme as a GSSOC`21 participant.
@ADRE9

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
Preventing parameter pollution

If you find it relevant, please assign me.
Please add the relevant GSSOC tags too.

Update Readme.md

Update the readme with the file structures and more pictures and snaps of applications.

[Need] PR template

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

Describe the solution you'd like
I want to add a PR template

Confusing button name in signup section

Deliverables:
Add the deliverables with their description here.

  • The signup button should be named Register instead of signup because it's causing a bit of confusion

Screenshots
image

[FEATURE] Edit Dialog

Currently only the Add Subject functionality supports dialog box, the edit functionality still redirects to a new page.

Deliverables

  • Add support for Dialog box for Edit functionality.

The modal should be similar to this :-

Untitled

Feel free to assign yourself if you want to work on this issue, if no one gets assigned I will work on this issue.

Footer can be Improved

Hey!
I just noticed that the footer of the website can be improved and ill be able to do it!
can you please assign me this task under gssoc'21?

working with mongoose means working with promises

Proposal

if you are working with mongoose, means you are working with promises. So, you need to handle promise. This is an easy fix but good for long term.

I suggest instead of this:

  • mongoose.connect(process.env.URI, {
    useNewUrlParser: true,
    useCreateIndex: true,
    useUnifiedTopology: true,
    autoIndex: true,
    useFindAndModify:false,
    });

You should do this:

`
const connectDB = async () => {

try{

        const conn = await mongoose.connect(process.env.URI, {useNewUrlParser: true, useUnifiedTopology: true});
        console.log(`MongoDB Connected: ${conn.connection.host}`)
}catch(err){

        console.log(err)
        process.exit(1)
}

}

connectDB();
`

It is good practice :)

Tech Stack Update ( LOGO add )

Deliverables:
Add the deliverables with their description here.

I will like to add tech stack logo used in our project this will make our project attractive !! Will start to work on this issue as soon as i get assigned !!

Add validator to every required field in the form like Email, username, password etc using express-validator

Write validator function as middleware. It should be before the actual controller function in every routes that take input from client side.

For example -

Email - should be email with proper formate
Username - should be unique and at-least 6 character long
Password - should be 8 character long which include at-least 1 special character, 1 capital letter
Semester - should not be greater than 8

and so on.

Have any doubt feel free to ask her.
Good Luck

Redesigning the UI/UX for the Attendance Page of the app.

In a website of app the UI/UX also plays an important role in engagements. The better the UI of the app the more catchy it is and attracts more users.
I have already designed the Landing Page and I want to redesign and enhance the UI/UX of all the pages of the app .

It would be very nice if you kindly assign me this issue so that I could work on it for GSSOC,21.

Create a loading component

Is your feature request related to a problem? Please describe.
The goal is to make a loading component that can be reused at different places whenever a backend API call is made or an update in the state happens or a fetch call takes place, so instead of holding the user on a screen we can show the loading component.

Describe the solution you'd like

  1. Create a react loading componet.
  2. Create a new reducer called UI or anything meaningful and create action for this component.
    The above action whenever gets triggered the loading component will be displayed.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
image

Signup form validation error

Describe the bug
There is no validation for semester in signup form

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'signup'
  2. set semester as 950
  3. It will be accepted
  4. See error

Expected behavior
It should display error while receiving an invalid semester

Screenshots
image

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Adding Contributor section in readme ( Automatically )

Deliverables:
Add the deliverables with their description here.
I will like to add a feature this will update contributor list in read me automatically !! Will start to work on this issue as soon as i get assigend !!

Repositioning Fab Icon in Subject Page.

In the current version the Add Icon is overlapping the grid.
Untitled

It would be better to reposition and apply a little bit of scaling so that the UI looks cleaner.
After Changes :
Untitled2

[Design] Create an about page.

Deliverables:
Add the deliverables with their description here.

  • Design about page in FIGMA or Adobe XD
  • Be consistent with the color palette used here
  • Ask for reviewing to the Project Admin

add contributing.md

Hey! I would like to add the following in contributing.md
Add the following -

1.Difference between GIT and GITHUB
2.How to clone,fork repository
3.How to create a branch and then use git push to push to repo
4.Create a PR
5.Squash commits in a single issue into one
6, Updating the forked and local repo as the updations are made in the upstream
I would like to work on this as a part of GSSOC'21

[FEATURE] Add Subject Dialog.

Currently clicking the add button redirects us to a new page.
I think it would be better instead of redirecting to new page, we can use a Form Dialog.
Untitled3

Headings of the Attendance page

Deliverables:

  • The formatting of headings of the Attendance Page should be similar to those in the Subjects page.
    Please assign me for it.

Screenshots
CURRENT
Screenshot (73)

EXPECTED
Screenshot (75)

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.