Giter VIP home page Giter VIP logo

praveenscience / internship-lms-frontend Goto Github PK

View Code? Open in Web Editor NEW
261.0 7.0 182.0 7.08 MB

We are in the mission of solving a crisis for a lot of small and medium enterprises, who are trying to recruit interns for their projects. This platform aims to onboard new interns, who have applied to the companies and help them understand the process and make the transition smooth.

License: GNU General Public License v3.0

HTML 51.71% JavaScript 12.22% SCSS 3.68% Shell 0.42% CSS 31.97%
mern-stack mern react reactjs nodejs bootstrap-5 bootstrap express expressjs

internship-lms-frontend's Introduction

DevTernShip: Internship OnBoarding Platform

DevTernShip Logo Branding

DevTernShip Introduction

Created by the developers, for the developers and the enterprises, DevTernShip aims to automate a process that is usually beset by difficulties; The recruitment phase is riddled with disorientation and this makes it difficult for the onboarding interns to make heads or tails of the system.

Here's where DevTernShip jumps into the picture - An Internship Onboarding platform with an innovative learning management system and intuitive performance tools, we ensure that all is 'smooth sailing' when it comes to the talent pipeline. Moreover, Augmented efficiency is brought about with a simple and robust UI, thus rendering the experience even more dynamic.

Introduction

The plight of small and medium companies has gravely wounded the world with serious consequences impacting all the onboard new interns, developers, full-time roles, and individuals during their recruitment phase. To solve these issues and to show a brilliant path to all the individuals listed we proudly present DevTernShip, a platform for Internship OnBoarding, Projects Management, Learning, Recruiting, and many more... for students, interns, developers, who are looking actively for Internship and full-time roles at the moment.

Agenda

We are on the mission of resolving a crisis for a lot of small and medium enterprises, who are trying to recruit interns for their projects. This platform aims to onboard new interns, who have applied to the companies and help them understand the process and make the transition smooth. This platform is the best gateway to show recruiters, what interns are capable of.

Easy OnBoarding

In this program, we are going to have a setup for every individual intern by providing their account section, i.e., Profile, likely and show others that you are ready to work on a particular stack by joining their company as an Intern. To guide you better, we are also planning to introduce Learning pages, Application Tracking Systems, Opportunity Tracker, and Live Interactive Sections on YouTube by our well-qualified mentors to keep you updated.

Bridging the Gap

This program helps the intern, interact with the Recruiters & Managers, effectively by providing social media handles. Also, the interns get a chance to exhibit their work by sharing their GitHub, LinkedIn profiles with their recruiters.

Couple of Favours

If you're interested, why not start with:

Motivation

  • Automate the process which needs to be done regularly.
  • Make the task easy and stress-free for the employers.
  • Save the time of people in doing the same work multiple times.

Methodology

We are following Spotify Agile Methodology to give the contributors an idea of efficient software development methods and how work is coordinated in the industry. If you don't know what that means, please refer to this blog.

Following are some points on the methodology to be used:

  • To get the best out of everyone contributing to this project, we have adopted high alignment and high autonomy model.
  • The issues created will have a description of the problem to be solved, the contributors have to figure out how they would like to solve it and what tool they would like to use.
  • Everything needs to be communicated to the scrum masters / project admin on what they think about a particular issue and its possible solution.
  • We will have a sprint of one "variable days" week, based on the level of difficulty of the issue with regular sprint planning sessions and daily stand-ups to track each contributor’s progress.
  • In these sessions, the scrum masters will take note of the progress and blockers if any. If the contributor faces any issues / blocks, the others will help them solve them and resume their work. Hence, the blocks can be addressed timely.
  • It would be a good idea to check out the Git Standards followed in our way of Spotify Agile Methodology model.

Video Links

Resources

GSSoC ’21 Participation

GSSoC Logo

Yes, we’re a part of GSSoC ’21. Look out for the Live Streams to get your issue assigned. We’re different. 😅

Want to Contribute?

Please read the Contribution Guidelines of this project.

Code of Conduct

Please read the Code of Conduct of this project.

Levels & Points

Level Points
Level 0 5
Level 1 10
Level 2 25
Level 3 45

Product Information

Screenshots

Tech Stack

HTML 5 CSS 3 JavaScript React JS Node JS Express JS MySQL GitHub Heroku

We are primarily considering JavaScript (sorry, not TypeScript) as the base language. We are using MERN Stack for this, where the tech stack consists of:

Front End

  • HTML & CSS (using SCSS)
  • Bootstrap 4 & Responsiveness
  • JavaScript & ES6
  • ReactJS & Node JS (lil bit for runtime)

Back End

  • Node JS + Express JS
  • Morgan + CORS & Node Mon
  • PostgreSQL/MySQL

Deployment

  • Husky
  • Netlify / Heroku
  • Github Actions

Important Note:

The typical MERN Stack involves MongoDB + ExpressJS + ReactJS + NodeJS. But, if you consider our product, it really needs a hierarchical database management system and not a document oriented one. MongoDB doesn't perform well under a lot of situations, so we're planning to use MySQL (or MariaDB) or PostgreSQL (We have already mentioned that it's yet to be decided between these two). I hope this note helps people understand why we are not using MongoDB in MERN Stack.

Installation & Running

System Requirements

For Server Side Setup / Development Environment:

  • Google Chrome: Add 'React Developer Tools' from chrome extensions. It allows to inspect the React component hierarchies in the Chrome Developer Tools.
  • Git: Our project uses Git as a version control system.
  • NodeJS: This allows to run JavaScript on a computer/server. It allows us to create, read, update, and delete files on the server side.
  • Visual Studio Code: This is the text-editor for our project as we are using React, it provides right extensions to support our React JS development. Add these extensions for ReactJS development -
    • ES7 React/Redux/GraphQL/React-Native snippets
    • GitLens - Git supercharged
    • Git History
    • ESLint
    • Prettier - Code formatter
    • PostMan: This software used as a REST Client to create and execute queries.

For running on the Client Side:

  • A modern browser that supports localStorage & Single Page Applications:
    • Google Chrome
    • Mozilla Firefox
    • Microsoft Edge (Blink Engine)
  • As this project doesn't use polyfills, legacy browsers aren't supported.

Installation and Setup

1. Clone this repository to your local system:

git clone https://<your_user_name>@github.com/<your_user_name>/Internship-LMS-FrontEnd.git

2. Navigate to the project directory:

cd Internship-LMS-Frontend

3. Navigate to the client folder:

cd client

4. Install all the dependencies:

npm install

Troubleshooting

  • If you get error while installing all the dependencies, check if Node JS is installed using your terminal:
node -v

or

npm -v
  • If it prints a version number, then Node is successfully installed.
  • If the above command gives error, then Node is not installed.

Please download and install Node JS from the official website and repeat previous step for installation.

Make sure you're downloading the LTS version.

Running the Code

1. Navigate to the project directory:

cd Internship-LMS-Frontend

2. Navigate to the client folder:

cd client

3. Start the application:

npm start

Team

Admin & Mentors

Scrum Masters

  • Gaurav Maheshwari
  • Varshith Chennuru
  • Ashutosh Kumar
  • Deepak Tiwari
  • Harsh Choubey
  • Priyanshi Chaturvedi
  • Deeksha Tiwari
  • Saloni Sawarkar
  • Gaurav Prajapati
  • Salma Shaik
  • Prachi Mane

FAQs

General FAQs

What is an Open Source Project?

Open Source Project denotes the project's source code is free for anyone to use, study and modify. An Open Source community provides a great opportunity for aspiring programmers to distinguish themselves; and by contributing to various projects, developers can improve their skills and get inspiration and support from like-minded people. But most importantly, they can prove that they can build fantastic experiences that people love.

Why is the master / main branch so important to not mess with?

The master / main branch is deployable. It is your production code, ready to roll out into the world. The master / main branch is meant to be stable, and it is the social contract of open source software to never, ever push anything to master / main that is not tested. If you make changes to the master / main branch while other people are also working on it, your on-the-fly changes will ripple out to affect everyone else, and very quickly there will be merge conflicts. So, branching is a technique that allows a developer, group of developers to create a new copy of a project without affecting the original, which is the master / main branch. This allows developers to experiment with a branch and if the experiment is successful, Git makes it easy to incorporate the experimental elements into the master / main.

About GSSOC

What is GSSOC?

GirlScript Summer of Code is the 3 months long Open Source program during every summer conducted by GirlScript Foundation, started in 2018, intending to help beginners get started with Open Source Development while encouraging diversity. Throughout the program, participants contribute to different projects under the guidance of experienced mentors. Top participants get exciting goodies and opportunities.

Where to ask for help?

  • You can message on the respective channel of a project or directly message the owner or mentors of the repository on Discord or LinkedIn.
  • You can email the mentors or the admin.

About DevTernShip

How to contribute to this project?

You have to work on an existing issue or can create a new issue and get yourself assigned. Before creating an issue, please talk to the Project Admin or one of the mentors.

What is this project about?

This project aims to solve a problem for many small and medium businesses who are looking to find interns for their projects. This platform is designed to help new interns who have applied to companies understand the process and make the transition as seamless as possible. This forum is the perfect way for interns to demonstrate their abilities to recruiters.

How should I start?

As it's an Agile Methodology, we're hosting weekly Live Streams and assigning the issues during that. Please don't miss them.

Can I work on an already opened issue?

You can always ask in the comments section of the opened issue to get yourself assigned but the owner may or may not assign you that issue. However, the owner may suggest to work on a fresh issue (either by creating a new issue or requesting you to create a new issue).

Contributors List

Contributors List

internship-lms-frontend's People

Contributors

0xjaskeerat avatar abhipsaguru1012 avatar abhisheksharma5333 avatar aditi1403 avatar alphax86 avatar amankesarwani2202 avatar ampsteric avatar anushkajain6459 avatar asetia9 avatar ayush461 avatar deek9399 avatar deepthi2001 avatar dependabot[bot] avatar dudenayak avatar gaurav24072002 avatar harkiratsm avatar kashishkhaneja avatar m-code12 avatar mayank-sh07 avatar muthuannamalai12 avatar nemavatsala avatar praveenscience avatar priyadarshu avatar rakesh0x7 avatar rk05-lenavo avatar saimanoharhm avatar salma2vec avatar sloth-panda avatar spring-dot avatar vismitap 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  avatar  avatar  avatar

internship-lms-frontend's Issues

Enforce Prettier on commits and builds.

I have got this prettier options configured in VS Code. We need a way to ensure that this is there in the build times. If it's not used, including the spaces, etc., the build should fail.

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "Untitled-1",
  "parser": "babel"
}

This issue is up for grabs for both DWoC and SWoC.

Tech Stack Poster

Tech Stack Poster
recently I read the README file I found some kind of missing thing so here is the first thing after every main point we can add a poster of that point so, everyone can easily understand and this is more beneficial also make it colorful.
@praveenscience please assign me

ReadMe: Update the Introduction Pitch

An introduction pitch needs to be an elevated pitch. I have discussed about the project in these two places:

Can we have an awesome pitch about the project introduction? The current Introduction section contains the description of the project. We need a story telling way of writing the pitch. Any ideas? Let's discuss! 🤘🏻

Up for grabs! ✋🏻

Make New and Improved Readme

Hey folks, Welcome to GSSoC.

This is going to be the first issue, a major one at least, after a lot of planning. Let's try to create the best Readme for our project possible. Remember, this is an Open Source Product. So, let's start with a couple of ideas.

Please, tell me what all sections and information we can include in the ReadMe document before claiming the issue blindly. Blind claim requests not entertained and will be rejected outright! 😅

So far I thought about these:

Heading
Logo / Banner
««« Some nice badges: Add number of stars, number of contributors, beginner friendly, tech stack, etc. »»»

Please feel free to let me know what all we can add, this will give you more chance for getting this assigned to you. Let's have a fair assignment for this. Also, this is going to be One Person's work, so it will be assigned for only one person. 😁

Up for grabs! ✋🏻

Typo in README.md

Line in README.md:
Be awesome and read the follow the guidelines.

Not sure about this but I think this sentence seems a little bit odd to me in README.md. If this requires any changes or is there any typo that needs to be fixed? If any, please do tell me. I would be happy to fix it. Thanks!

For your reference, the screenshot has been attached below:

typo

Add GSSoC '21 information.

This project is for GSSoC '21 as well. Need a nice content to tell everyone that this is also a part of GSSoC '21 and contributions are welcome. Completion of this issue means:

  • Add GSSoC '21 Project participation information.
  • Add the trailer of the project submission to GSSoC '21.
  • Create labels for the GSSoC related difficulties.
  • Set up score sheet in Google Sheets.
  • Create a Live Stream about intro on this project to GSSoC '21 with the programme lead.
  • Set up the Website and add them as a part of GSSoC '21 as an open source public contribution website.

Deadline: ASAP!

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

Features that we can add
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.

Screenshot
Screenshot (15)

Designing basic wireframes for the website

We need the complete user flow for this platform. Let's design it using the software of your choice. This should cover:

  • Welcome
  • Landing Page
  • Sign In
  • Help Screens
  • User Dashboard
    • User Profile
    • User Account Settings
  • Admin Dashboard
    • Manage Users
    • Manage Content
      • Steps Management

ADD ISSUE_TEMPLATE

Hello there,
I would like to add an issue template for your repository. This template would have four issues namely bug, documentation, feature, proposal. Kindly assign me this issue as a part of DWOC.
THANK YOU

Regarding DataBase Used in MERN Stack

@praveenscience
Sir , I would like to bring something in notice , that in the Readme file , you have mentioned that we will be using MERN Stack , in which you mentioned everything right , except " M " , According to my knowledge and experience and what all I have learnt from internet and also with people I have worked , I think " M " in MERN Stack stands for "Mongo-DB" database and not MySQL , so please can you confirm this thing?

Add a GitHub action to auto-assign Mentors for every PR

I would like to add a GitHub action to auto-assign mentors for every PR. It sometimes becomes hectic for the mentors to take a look at all the Projects for the PRs made by the Contributors. This action would give a nice notification about reviewing the pr and make things pretty easy for the mentor. It would automatically ask for reviews by the mentors on every pr created.

Demo :

Implement Apple Style Headers for the App

Shall we create an Apple Style headers? Would like it to have the same look at feel. Breakpoint to mobile version at 767px and above that, i.e., 768px and above should be full.

Desktop:

image

Mobile:

image

Let's use right Bootstrap classes for now. We should be using SCSS for the overall application, so I am expecting two files to be created (with App.scss for now just including the Header.scss (Please don't add extension in @imports inside SCSS)):

  • src/components/Header/Header.js
  • src/styles/Header/Header.scss
  • src/styles/App.scss

And two files to be updated:

  • src/components/App.js
  • src/styles/App.scss

This is up for grabs for both DevScript & Script Winter of Code folks! 😁

Login and Register page

I want to work on this issue.
Please assign me for this issue.
I am a gssoc'21 participant and want to work on this issue

Add in let's discuss

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

I would like to add something more in the let's discuss part of readme file.

Describe the solution you'd like...

I think it would be better if add a table indicating the days assigned to assignee for solving the issue and making pr on the basis of hardness level like 1 day for level 0, and so on (the no. number of days that you would suggest).so that after that timeline it can be assigned to another participant if the former is unable to solve.

Additional context

I am gssoc'21 participant.
please assign it to me.

Feature request

I can create a poster for the project.

The poster will attract more people towards the project and it's easy to get ideas regarding the project by overlooking it.

(i am GSSoC'21 participant)

kindly assign this issue to me!!

Add a welcome bot

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

I would like to add a welcome bot for students opening their first issue or PR.
Kindly assign it to me under GSSOC, thanks!

Describe the solution you'd like...

Describe alternatives you've considered?

Approach to be followed (optional):

Additional context

Integrate Welcome Bot

Hello there,
I can add a welcome bot config file having a proper message that will show up when any user will open up an issue or pull-request for the first time as a part of DWOC. Please assign me this issue.
For reference, kindly check out: https://github.com/apps/welcome

THANK YOU

ReadMe: Add the Rules of GSSoC 21 Section

Let's have a quick overall steps about GSSoC 21. We'll include the following in the best way possible.

  • Need to be already registered for GSSoC '21.
  • Can't register right now again.
  • Make sure you discuss in Discord before working on issue.

Let's discuss what you're planning to write before you're being assigned! 😁

Up for grabs! ✋🏻

Create the Best Contribution Guidelines Document

Hey folks, Welcome to GSSoC.

This is going to be the second issue, a major one again because this impacts a lot of people. Let's try to create the best Contribution Guidelines for our project possible.

Please, tell me what all sections and information we can include in the Contribution Guidelines document before claiming the issue blindly. Blind claim requests not entertained and will be rejected outright! 😅

I really love this document: Contributing to Rezume, so shall we please kindly stick to this? I would love to have a macOS or Ubuntu taking screenshots than Windows because of the Clear Type fonts. Sorry Windows.

Please feel free to let me know what all we can add, this will give you more chance for getting this assigned to you. Let's have a fair assignment for this. Also, this is going to be One Person's work, so it will be assigned for only one person. 😁

Up for grabs! ✋🏻

for contacting Email id should be provided

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

Describe the solution you'd like...

Describe alternatives you've considered?

Approach to be followed (optional):

Additional context

ReadMe: Add Trailer Information for GSSoC.

We need to add the trailer link to the ReadMe in some nice place, with a great write up.

Introduction to DevTernShip

Let's discuss about the write up here before getting assigned. ✋🏻 To request for an assignment, can you write a simple pitch for this? Like where would you like to add, what would you write, etc. 🤘🏻

Choose one from these. We have got the image assets here:

Up for grabs! ✋🏻

Tech Stack Update ( LOGO add )

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 !!

Integrate Netlify for Deploy Previews

As we move up to the coding phase now, let's start implementing the Deploy Previews feature of Netlify. When someone creates a PR, the netlify service should send a link to show how it looks.

You can find more information here: Introducing Deploy Previews in Netlify. This is up for grabs people. Anyone from DWoC or SWoC can pick it up.

When you pick up, please answer the following in bullet points as answers:

  • Do you understand what is required? Do you need any help with the issue?
  • How much Netlify integration knowledge you have? You wanna try or you know it and you wanna work?
  • Which programme you're working on? DWoC or SWoC or both?

As always, reach out to me in case of anything. 😁

Update README.md of client folder

I read the README.md of the client folder and I saw that there is no step of npm install there. I would like to update the README. Please assign this issue to me as a part of GSSOC'21.

Adding Routing and connecting it to the Header

Describe the solution you'd like...

I would like to add the basic routing of our project using React.js which will be in header and will include :

  • Home (Dashboard)
  • About
  • Login
  • Contact us
  • Admin Screens

Approach to be followed (optional):

  • I would create different components for The Header , The Navbar
  • add routing for different pages to be followed
  • use Bootstrap for Designing of Header And Navbar.

The basic structure will look like this:

Design structure

ReadMe: Add Day 3 Video Link

Very quick one for whoever is trying out Open Source for the first time, can someone add the Video 3's link for tomorrow?

- [Tech Setup Day 3](https://rb.gy/dxbpze)

Just remember, this is just for practice, no points will be awarded or no labels will be added. If you wanna practice, I can assign you. 😊

Up for grabs! ✋🏻

Improve ReadMe

Is your feature request related to a problem? Please describe.
There is no section of getting started for developer . How can we start our project in development mode.

Describe the solution you'd like...
I will include all the details like clone the repo then go to folder , enter command " cd client -> npm install -> npm start "
Allow me to do this task as part of gssoc'21

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.