Week 1 - Building Projects to impress 🤯🤯 Employers or Hiring Managers [VoteSub]

kiranbansode — Sun, 31 Oct 2021 17:11:05 +0000

Hey everyone, My name is Kiran A. Bansode. I'm a self-taught Full-Stack web developer.

This is 2nd blog of Building Projects to impress 🤯🤯 Employers or Hiring Managers[VoteSub] series.

So as from 1st blog you already know, Why I'm buiding this project ?

In this blog I'm going to share you, What I did in last 3 days ?

Day - 1 [Thursday, 28/10/2021]

No matter what if your project is small or big, SDLC(Software Development Life-Cycle) methodology will provide clearly defined processes for creating high-quality software.

This methodology consist following phases -

Requirement(Research)
Design
Coding
Testing
Production
Maintenance

On Day - 1, I did some research for my project like, Which will be most common input fields ? What data will be required for firebase to create a new user ? ... and much more.

On the basis of that research, I designed two pages using Figma.

You can view them in Figma designs here

Day - 2 [Friday, 29/10/2021]

Day - 2 was all about setting up project and adding required dependencies. I installed following dependencies -

@mui/material, @mui/icons-material, @emotion/react, @emotion/styled,
@reduxjs/toolkit, react-redux
react-hook-form, yup, @hookform/resolvers
sass, styled-components

I also install devDependencies like -

prettier
eslint
husky
lint-staged
commitlint

The will help me to have readable and maintainable code. I also configured ESLint, Prettier, Husky and commitlint using their official docs.

I also use git branching strategy. So far, I created 2 branches

master - production or live website related code
develop - development realated code

In future there will be 2 more branches.

testing
staging

Note : I changed my default git branch to develop. So those who forked my git repo, please adjust your fork repo setting(I don't know How to ? so can't suggest anything).

Day - 3 [Saturday, 30/10/2021]

Not able to do much project related work because of school. But what ever time I got after school work, I was able to identify 3 most common component that I'll be needed most.
I added them as card in trello.

You can view trello cards here

I also added some more lists. Those lists reflects actual SDLC(it still not complete).

In next week I'll start coding phase of project for those 2 pages (Login and Registration Page). In that week I will convert designs into code. Also add redux store and connect project to firebase backend. For this I'm going to use Agile model. I'll complete this project in weekly sprints.

This week is going to be hectic because of Diwali vacation. Also I'll need to check my school's Semester - 1 papers. This is going to be fun and challenging.

So till then bye bye . See on next Sunday.

Intro - Building Projects to impress 🤯🤯 Employers or Hiring Managers [VoteSub]

kiranbansode — Wed, 27 Oct 2021 07:35:20 +0000

Hey everyone, My name is Kiran A. Bansode. I'm a self-taught Full-Stack web developer.

As judging from this post's title, you can say that I'm building this web application to impress or to showcase my skills as a Full-Stack web developer to future Employers or Hiring Managers. From this project I think that those peoples can evaluate my abilities and would offer me a
job(fingers cross 🤞🏻🤞🏻) or atleast give me a chance for interview.

Okay. Mr. Kiran.

So, What is your Project ?

VoteSub

A place where students or any other users can vote their favourite school subjects so they will stay on top of famous subjects ranking list.

What are the features of this project ?

A new user will be able to sign in using the Registration page.
Existing users will be able to log in using the Login page.
Dashboard page will show current status or rank of user’s favourite subject and remaining votes that user has
Subject information page will show that subject’s little bit of information with some high quality and stunning images.
A Voting history page will show who voted for that subject
A Profile page of voters where visitors can see only basic information.
There will be some admin functionality to help manage voters in the Admin page which will be hidden from normal users.
Every week the admin will release some votes for users so they can give those votes to their favourite subject.

Above features are going to make a MVP(Minimum viable product), which I want release for my students(Yes! I'm a teacher 🧑🏻‍🏫) on ~~Monday, 22 November, 2022, when schools are going re-open after Diwali Vacations. So consider this date as my deadline 👹 for MVP~~.

Update 1 : looks like I underestimated project's complexity and blindly posted deadline which is too early. This is going to take some time. So hang in there. No deadline so far yet.

Features that will have in my project after MVP get released

Works like native app [ PWA ]
Offline data capabilities
pdf generation at server
users can upload their own profile pictures
more controls for admin

…and much more.

What is your tech stack ?

I'm going use following technologies -

Frontend

HTML | CSS | JavaScript
React | React Hooks
Redux Toolkit | React-Redux
Style-components | SASS
Material-UI (MUI)
React Hook Form | Yup
TypeScript

Backend [Firebase 🔥🔥]

Authentication
Firestore
Storage
Cloud Functions
Hosting
Emulators

Tools

VSCode 🧑🏻‍🎤
Vite - React
Nodejs | Yarn
ESLint | Prettier | Husky 📸
Figma | Draw.io
Trello

...and some other tools

OK. That some pretty impressive tech stack Mr. Kiran. But

What exactly do you want to show to employers or hiring managers, so that they can be impressed ?

Few days ago, I read this blog on Dev.to. In that blog Johannes describes what differs a newbie from a professional developer.

I was very impresssed. So I decided I should try this to impress employers or hiring managers. I'm going to follow what Johannes suggested in his blog. Also I'm going to add my own twists.

Also our tech industry is having pretty rough time for hiring skilled developers. Companies are looking for more than what tradional collages are teaching their students. It is becoming very hard to find right candidate for different roles or who can do most of things.

So, by completing this project I want demonstrate that I have such required skills that needs to have in a developer. Following is a list of the things that I want to show to my future employers or hiring managers

Git Branching Strategies
Git Issues
CI/CD using GitHub Actions or other tools
Conventional Commits
Trello Tasks management
Wireframes using Diagrams.io
Designs using Figma
How I document my codebase ?
What is my strategy to convert a design into working code.
If I have issues, How I solve them ?

...and many more

Where can you find my project related stuff ?

Source Code : GitHub VoteSub
Project Managment : Trello VoteSub
Issues Tracker : VoteSub GitHub Issues Tracker
Designs : Figma VotSub (I'm not a designer 😔😔, but I tried).
Wireframes : Diagrams.net VoteSub

Wireframes link will only show image(not good quality). I don't know other way to show Diagrams.net files

To open wireframes file in your computer do the following steps

Click on download button.
Go to Diagrams.net.
Click on Device > Open Existing Diagram
Choose downloaded file.

When you will able to see my progess on this project ?

This is going to be a weekly blog series. From now on, every Sunday[IST] you will get a new blog related to this project. That blog will contain all projects related info like prior week's plan or design and past week's completed tasks, calendar schedules, screenshots of git commits and issues, and all ups and downs and last but not list, What did I learn new ?

Guys if think this is exciting comment this blog. If you want to suggest or want to add something, comment it. I'll be happy to read your comments.

So, see you on Sunday, till then sit tight.

pssss.... this is my first ever blog on internet, so please go easy on me in comment section for my grammatical errors.

Bye 👋🏻👋🏻 ...

DEV Community: kiranbansode