catsintech/rezume

An inspiration from Represent.io.

Welcome to Rezume - a free Resume Generator

Rezume is a free online portal for generating resumes without worrying about the styling and formatting. In the web portal, you only need to input the basic information which you want to have on your resume and it will automatically generate a decent resume for you.

Table of Contents

• Major objective
• Tech Stack
• Getting Started
  • System Requirements
  • Installation Instructions
  • Running the application locally
• Contribution Guidelines
• Learning Resources
• Motivation
  • FAQs for GSSoC '20
• Mentors
• Project Admin

Major objective

• To let beginners venture into the domain of Web Development
• To facilitate students and working professionals to create decent Resumes by focusing on the content rather than the styling and other UI features

Tech Stack

• Frontend: HTML5, CSS3, JavaScript, Bootstrap, ReactJS
• Backend: NodeJS

Getting Started

System Requirements

As this is a React JS application, you need the following to support your development environment.

• Git
• Node.js (Please go with any latest LTS versions)
• Linux Based Terminal, if you're using Windows and installed with Git.
• Google Chrome or a decent latest web browser.
• Visual Studio Code is the go-to editor for some complex languages like React using JSX or TypeScript and I finally agreed with Wes Bos that VS Code is better for development of React JS. Obviously, with VS Code, you should be having the right extensions to support your React JS development, but comparing with Sublime Text 2, VS Code is still in its infancy. Get these extensions and here's my dotfile:
  • Prettier - Code formatter helps you to format your JavaScript / TypeScript / CSS using Prettier.
  • Cobalt2 Theme Official is the theme used by Wes Bos, which comes with a nice user experience and a lot of awesome features. I am using a modified version of Cobalt2 that's a crossover between Monokai and Cobalt2.
  • GitLens - Git supercharged supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • Git History helps you to view git log, file history, compare branches or commits inside VS Code.
  • ESLint integrates ESLint into VS Code. If you are new to ESLint check the documentation.
  • ES7 React/Redux/GraphQL/React-Native snippets provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.
  • Todo Tree (optional) quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
  • vscode-icons (optional) is more of a cosmetic thing, which brings icons to the Visual Studio Code editor.

Installation Instructions

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. This project makes use of Create React App. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimises your app for production. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine.

Running the Application Locally

First Time Only

1. Fork the project.
2. Clone the project.

   git clone https://<your-github-username>@github.com/<your-github-username>/Rezume.git

3. Enter the project directory.

   cd Rezume

4. Install the required modules.

   npm install

Every time when you start to develop, please do this.

1. Enter the project directory.

   cd Rezume

2. Start the application.

   npm start

3. Open http://localhost:3000/ on your favourite browser. Let anyone from the mentoring team know, if you are facing any troubles.

Contribution Guidelines

• Please read our Code of Conduct and Gitflow for contributing towards the project.
• Write clear meaningful git commit messages (Do read this).
• Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged. (Check this for more info)
• When you make very very minor changes to a PR of yours (like for example fixing a text in button, minor changes requested by reviewers) make sure you squash your commits afterwards so that you don't have an absurd number of commits for a very small fix. (Learn how to squash at here)
• When you're submitting a PR for a UI-related issue, it would be really awesome if you add a screenshot of your change or a link to a deployment where it can be tested out along with your PR. It makes it very easy for the reviewers and you'll also get reviews quicker.
• Please follow the PR Template to create the PR.
• Always create PR to develop branch.

Note: Are you an absolute beginner? Please check the issues labelled with beginners. These issues might let your Open Source journey begin - Welcome onboard!

Learning Resources

• Github Workflow
• Introduction and Architechture Basics (1/3)
• Introduction and Architechture Basics (2/3)
• Introduction and Architechture Basics (3/3)
• Rezume Data Structures and Website Marketing

Motivation

This project is part of the GirlScript Summer of Code 2022 Open Source Program.

Frequently Asked Questions(FAQs) for GSSoC '22

This project is accepting contributions under GirlScript Summer of Code 2022 - three months long Open Source program conducted by GirlScript Foundation.

1. How to start as a beginner so as to contribute to the project? There are many beginner level issues to begin with, which include documentation, development and design. Also, feel free to make issues for features as well as for reporting bugs. Participants can claim an issue by commenting that they are interested in it. We are also open to new ideas and suggestions.

2. How to communicate with us? All communication will happen on the Slack channel for this particular projects. Mentors can also be reached through GitHub. Avoid DMs and unnecessary mentions on slack and GitHub both. Checkout this issue for more.

3. What is the deadline for any task submission? Mentors can assign issues to participants and also mention a deadline before which the issue is to be resolved. They can reassign issues in case of any delay, so be active and complete your tasks within the negotiated duration.

Mini Leaderboard A Proof of Concept from the Team

We created a Mini Leaderboard as a proof of concept for this project and the complete creation of the leaderboard has been explained in a Live Stream by Praveen. Here are those resources:

• The Mini Leaderboard: Live app that uses GitHub's APIs to pull the real-time scores.
• Trailer: What's the fuzz about this Mini Leaderboard, Proof of Concept.
• Workshop: Live coding by Praveen on how we created the above said leaderboard.

Mentors

Name	GitHub Usernames	Domain
Praveen Kumar Purushothaman	@praveenscience	Full Stack MERN / LAMP + Documentation
Abhipsa Guru	@AbhipsaGuru1012	Full Stack Developer
Vishwa R	@code-reaper08	Full Stack + JAM Stack

Project Admin

Praveen Kumar Purushothaman

Need help?

Feel free to contact me at [email protected].

rezume's Issues

Message all mandatory fields entered, ready for print/ download

Can we have a popup or a message displaying the resume is completed and available for print/ download option.

Implement array data structure and add forms for Education

Let's discuss on a data structure for Education and then let's implement this on #8.

Implement array data structure and add forms for Skills

Let's discuss on a data structure for Skills and then let's implement this on #8.

Add email, phone and website editing fields

Is your feature request related to a problem? Please describe.
We have to add our own email, phone and website in resume but there is no field to make changes in email, phone and website.

Describe the solution you'd like
I will add a field to get the phone, email and website details from the user and will display the changes in resume

Additional context
I am student of VNIT Nagpur,CSE 2nd year.
I am contributor at GSSoC '22. Please assign this issue to me.

Add TOC to README.md

Is your feature request related to a problem? Please describe.
Currently, the readme is quite a long one.

Describe the solution you'd like
A TOC will help for easy navigation through the README file.

Describe alternatives you've considered
N/A

Additional context
Screenshot

ReactJs logo remove from tab

I will remove the reactjs icon which is showing on tab.

Add CI / CD + Netlify Support

Currently we are using GitHub Pages and creating a build, pushing it to gh-pages branch and updating the build files by the following process in command line using :

• Delete the build folder.
• Recreate the build folder.
• Create a CNAME file.
• Using gh-pages package, deploy the contents of build to gh-pages branch.

The above process needs to be automated using Continuous Integration / Continuous Deployment Pipelines using either Travis-CI or GitHub Actions. Once the build is done, this needs to be deployed automatically, if everything is successful to app.rezume.best through Netlify. This is up for grabs! 😊

Implement array data structure and add forms for Projects

Let's discuss on a data structure for Projects and then let's implement this on #8.

Implement array data structure and add forms for Awards

Let's discuss on a data structure for Awards and then let's implement this on #8.

Shall we discuss a neat logo?

Yet another discussion based issue. I am also looking for an awwwesome logo for this. I really love how flat logos exist. Let's stick with the four designs ranging from most preferred to least preferred:

• Lineal Colour (most preferred)
• 2 Colours
• Colour
• Lineal (least preferred)

Let's have the theme in a studenty way! This one's up for grabs and best design is gonna get 7 points. 😊

Add a section for Recommendations/References

Recommendations section is an essential part of a Resume. One can add references of people who have had enough direct experience with you to testify to your character, conduct and competencies.

It Should have following fields:

• Reference's Full Name
• Job Title
• Address of Organisation
• Contact Telephone
• Contact Email Address

Let's discuss more on this on #8.

Changing Occupation Position and separate it from Summary

Describe the bug
The Occupation of the person appears right next to the description about the person. But, It should be somewhere just next to Name of the person.
To Reproduce

Expected behavior
We must expect the profession being in a separate line and detached from the Paragraph.

Screenshots

Additional context
I would like to solve this under GSSOC 2022 Program.

Convert Class Components into Functional Components and upgrade React

We have the oldest version of React possible. This is because, the project was started long back and it's now being recreated. Since Class Components have a heavy payload - they have component life cycles and stuff, and hooks are the new ones, let's start converting the main App to make use of hooks. This is up for grabs! 😊

Add the experience ,education and award section

I am a contributor of GSSOC'22
I want to add some sections like experience, education, and award.
There is mention only the name of the section but we can't add them in the resume so I want to fix this.

Create Personal Details menu item and put About & Contact under them

The current navigation is too huge with so many items:

Let's try to use a second level navigation that is available only when it's clicked or hovered (let's decide later) and throw both About and Contact - the first and last items inside Personal Details. This is open to ideas and up for grabs! 😊

Adding issue forms for the repo

I want to add a few issue forms so that it will be convenient for new contributors to open issues. There are already issue templates for this project but they are deprecated now, issue forms instead work way better. I plan to create Bug Report and Feature Request forms.

The Bug Report issue form will have the following fields

• Description of the bug
• How to Reproduce
• Expected behavior
• Urgency indicator
• Desktop Info (OS, Version, Browser etc):

The Feature Request issue form will have the following fields

• Is your feature request related to a problem? Please describe.
• Describe the solution you'd like
• Describe alternatives you've considered

Timeline- I can complete this task by 3 March

Add text field to input Projects, Skills, Hobbies section

Is your feature request related to a problem? Please describe.
There is no text field to add the projects, skills and hobbies.

Describe the solution you'd like
I would like to add the text field for the projects, skills and hobbies.

Additional context

I am a GSSOC'22 participant.

Add a world class developer friendly readme for this project

The readme for any project is as good as the project itself. I was looking through different Readme files and I tried compiling something as well. The one I came up with is something like this:

Table of Contents

• Name Inspirations
• Demo
• Use Cases
• Working
• Development
  • System Requirements
  • Installation
  • Testing
• Contributing
• Thanks

Currently, the readme this project has, is created by the Create React App boilerplate. I have seen some good ideas coming up here: matiassingers/awesome-readme: A curated list of awesome READMEs, where we can get inspiration from.

We need something that is not cluttered as well as looks professional and decent. 😊

Implement array data structure and add forms for Hobbies

Let's discuss on a data structure for Hobbies and then let's implement this on #8.

Add Link to the brand name in header.

No hyperlink in the brand name in header REZUME
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'localhost:3000'
2. Click on 'the brand name REZUME, you will not be redirected to home page.'
3. Scroll down to '....'
4. See error

Expected behavior
On clicking brandname that is Rezume, should redirect us to the homepage. .

Screenshots

Desktop:

• OS: [Windows 10]
• Browser [Chrome]
• Version [80.0.3987.149]

Add a section for Work Samples

We should have one more section for Work Samples. It consists of 4 elements.
1 Blog Link
2 GitHub Profile
3 Play Store Developer A/c (Public Link)
4 Behance Portfolio Link
5 Other Portfolio Link

This section is important for experience as well as for fresher.
@praveenscience please review it.

Fixing responsiveness of the webpage

Is your feature request related to a problem? Please describe.
The website looks good in desktop view but it is not configured for the mobile view.

Describe the solution you'd like
Adding responsiveness to the webpage in sass file (Media Query).

Additional context

I have attached the image above, the website doesn't look good in mobile view.
Hey, @praveenscience kindly assign me for this issue to be fixed within this week.
Thank you

This is to demonstrate how I can make a contribution to the Open Source world as a new person.

Is your feature request related to a problem? Please describe.
Well, no, this is for a demo.

Describe the solution you'd like
The new students need to understand how to contribute to an Open Source project.

Describe alternatives you've considered
Nothing

Additional context
Nothing

Need a semantic accessible tag for navigation elements

Currently we have a <span> tag. Only the <a> tag or <button> tag are accessible, not <span>. This needs to be checked as well as <a> cannot be added directly on React with href="#". This is up for grabs! 😊

Add a version for the deployment in the footer

The version could be the commit ID of the current build on the master branch. Somehow we need to fetch the version information using the commit hash and that needs to be shown either using:

• a text on footer of the application
• a variable on the page
• a comment inside the source

I have seen a few people doing it, which I need to check with them. But this is again up for grabs. 😊 Best idea would get some nice chocolates! 🍫

Implement a page for About

Let's create a layout for About Page and link it to the button. This is up for grabs as well. 😊

Use the defaultValue or value props instead of setting children on textarea.

There seems to be some input defaultValue issue with the connected components.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://rezume.best/
2. Open the F12 DevTools and click Console.
3. You can find the error on console.

Expected behavior
The <textarea> needs to have a defaultValue.

Screenshots

Option for the ordering of the sections

Different users may have different notions about their resume. Someone would prefer the projects section before education or awards.

Can we give the user flexibility to order the sections.

Some of the ideas that I have:-

1. Let the user give a priority number --> and section will realign on priority.
2. Have predefined templates of the main app.js, and user can pick any one of them.

Add Code_of_Conduct.md file and link it to readme.md file

No Code of Conduct file is present.
As a gssoc Participant, I would like to add Code_of_Conduct.md file and link it to the readme.md file.
@praveenscience @AnjaliSharma1234 please assign me this task.

Implement array data structure and add forms for Experience

Let's discuss on a data structure for Experience and then let's implement this on #8.

Use useState Hooks to maintain hooks for those class components using states

Find all the classful components and convert them into stateless functional components. If there are any states in it, let's use useState hooks.

Implement GitHub Actions for Welcome Messages

When a PR or Issue is opened, let's have some GitHub actions do the magic by asking the users to do something or giving some useful information. Currently it's going to be experimental and we need to see the potential of how this can be used, but let's start with something small. 😊

Adding a footer

I think it would be nice to add a simple Footer to the app.

The left side can be used to show the version of the app like in #4
and the centre part can be used to show a copyright link like a
copyright 2020 Rezume
etc.
Note: The footer will be seen only if the we scroll down to the bottom and that way the user will not be limited by the space available for the Resume created.

Add CODE_OF_CONDUCT.md file

Is your feature request related to a problem? Please describe.
CODE_OF_CONDUCT file is missing in this repository.

Describe the solution you'd like
I want to add the CODE_OF_CONDUCT.md file to this repo.

Describe alternatives you've considered

Additional context
I am contributor at GSSoC '22. Please assign this issue to me.

PR template

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
PR template

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

Additional context
Add any other context or screenshots about the feature request here.

On writing something the form fields are getting disappeared

Expected behavior
On writing something in form fields resume should be updated

Github Actions

Is your feature request related to a problem? Please describe.
Yes, to handle situation where PR's and Issues get large enough to handle

Describe the solution you'd like
Implement the following actions:

• To auto-assign reviewers on PR.
• To detect stale issues and PR and give them appropriate labels so students can know it's up for grabs in the future. (Especially required after the project goes into coding phase)

Additional context
The discussion made was made wth the mentor @praveenscience accordingly.

Input fields are breaking on change

Describe the bug
The form components in which you would be providing your inputs are breaking on changing their state. As soon as you type, The components will vanish.
Make sure you are on localhost:3000 and not on https://app.rezyume.co/ because the input fields on live site are working well but, since then there have been many updates on the git repo which might be breaking those inputs.

Expected behavior
They should not vanish instead be supportive.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20.04 LTS
• Browser : Chrome
• Version [e.g. 22]

Additional context

Make Copyright Year Dynamic

Describe the bug
The copyright in the Footer has a hardcoded string for year 2020. We can make this Dynamic and then it will get updated automatically as the year will be changing.

Expected behavior
Change the Year in the footer from copyright as it changes and remove hardcoded value.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20.04 LTS
• Browser : Chrome
• Version : 98

Additional context
I would like to work for this under GSSOC 2022 Program

• I will be combining #81 and this issue under one PR.

Implement array data structures and implement form for Position of Responsibility.

I think we should add one more field of POSITION OF RESPONSIBILITY. In this we can add the information of Social Activities or any volunteering activity( for eg. I had become Chief Invigilator in Air force Exam in October 2018 for Delhi region. In this project, I had done management and technical work.)

Add Pull Request Template and Issue Template

@praveenscience I am a GSSOC participant and I would like to add a pull request template and an issue template folder with bug report and feature request template.

Screenshots

Pull Request

Bug report

Feature Request

Create Contributions document

We need to create a contributions document that sets the environment specification and how to create Pull Requests in a clear way for developers to do a streamlined code. This should include:

• GitHub Branching & Workflow Policy
• IDE & Linter Settings

Create a data structure for each listable menu items and add them to the nav

For the following elements, there's no proper data structure defined:

• Experience (#12 proposed to take by @adad20)
• Education (#13 proposed to take by @anushreejain98)
• Awards (#14 proposed to take by @sanchibansal340)
• Projects (#15 proposed to take by @mayonk-kumar-git)
• Skills (#16 proposed to take by @SomyaGandhi)
• Hobbies (#17 proposed to take by @lakshyajit165)
• Hobbies (#40 proposed to take by @amoghjalan)

Can we have a data structure to store each of them as lists? I guess most of them (except Skills & Hobbies) need to be sorted by dates. We might also need a good data structure! 😊 Let's discuss and this is again up for grabs - there won't be any file changes, but it's going to be associated with other issues - individually discussing the structures. This is again up for grabs! 😊

Fix vulnerabilities and update packages

When you install the package for the first time, it shows today that there are 38944 vulnerabilities. Most of them can be fixed quite easily. This is very important in terms of security and patching.

This is up for grabs! 😊

:feat: email section at the left sideBar

Is your feature request related to a problem? Please describe.
Yes the left sideBar does not contain the e-mail section for which user can add their email to the the rezume.

Describe the solution you'd like
I would like to add the email email section to the left sideBar.

@praveenscience what are your thoughts.? We can include even the Website and Phone number section too.

NavBar Components

Hey ya , Suneeth this side GSSOC'22 | Participant
Can I make the NavBar Components responsive by adding the routes ,
Also I will change the frontend look of the Navbar & make the footer component.
Please Assign me an Issue to work on it.

Footer Component

Is your feature request related to a problem? Please describe.
Currently, there is no footer component in this project so I would like to add one

Describe the solution you'd like
A simple footer with sitemap and social media links

Move rezume.best to app.rezume.best

Let's plan on using a landing page on rezume.best and create another project for it to be hosted. Let's move the main application to app subdomain and set up the DNS entries on Cloudflare.

• Create a DNS Entry for app.rezume.best.
• Move current build from rezume.best to app.rezume.best.
• Update the build command in package.json.
• Create a new repository for landing page.

Add some templates for the Resume design

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
There is only one design template for the Resume. Users may want to choose a design according to their personality or profession.

Describe the solution you'd like
A clear and concise description of what you want to happen.
I think it will be better if we give user with some options for the design and give them preview of what it looks like and he/she can select accordingly.

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

Additional context
Add any other context or screenshots about the feature request here.

Let's start a discussion about Landing Page for this

We all know that this product is mainly for new people to understand how React JS works and along with that, we should start looking into creating a good landing page like how Represent - A better way to résumé has.

I would really love your suggestions on this issue. Let's all discuss. This is not an issue for grabs but a discussion on how to make this one awesome.