Design a website for posting and applying for volunteering jobs. A company can post jobs and a volunteer can apply for them.

Timeframe: 1 week.

My fourth project on the Software Engineering Immersive course at General Assembly and my first fullstack project.

At the end of the course we all started to talk about finding a job, then I realised that I would like to do a volunteer job and it would be very nice to go to a website with only volunteering jobs.

The design was "inspired" by indeed.

to be done

You are able to register as a company (who can post jobs) or as a volunteer (who can apply for jobs).

If you register as a company and login you will be redirected to the company profile, where you can add the description of your company.

When you as a company go to the home page you are able to add opening jobs and/or close a job. You can also see all the volunteers that apply for a job.

If you register as a volunteer and login you will be redirected to the volunteer profile, where you can add your information like phone number and CV.

On the volunteer home page you can see all the open jobs and apply for them with just one click on the apply button.

After that it is up to the company to contact the volunteer and the volunteer to answer to the company.

1. Clone or download the repo in your CLI.
2. Navigate into the shell with pipenv shell.
3. Open the backend folder and run the server with python3 manage.py runserver.
4. Change to frontend folder and run npm start.

• Python
• Django
• JavaScript
• ReactJS
• SASS
• Bootstrap
• Google Fonts
• VS Code
• Chrome
• Git and GitHub

I started to think about this website and already had an image on my mind of how I wanted it to be.

As we learnt through the course, it is best practice to start with a pseudocode and I used Notion for that.

Once the pseudocode was done I started with the wireframe, I used Figma, and decided what I wanted to add to this website.

And I also did the diagram for one-to-many and many-to-many relationships:

Once I was signed off I started coding.

The code piece that I like the most while using Django and Python was models, and learning how to use One-To-Many and Many-To-Many relationships.

• I did one model for each relationship that I wanted on my project.

  • Company, Job and Volunteer models has fields that the database will use.
  • Company and Volunteer have one-to-one field to specify that each one has their own Id.

  

  • Volunteer have many-to-many relationship with Job, meaning that one Volunteer can have many jobs and one Job can have many volunteers.

  

  • Job have a foreignKey to specify which company added that job.

  

I really like frontend and styling, so this was my favourite part in this project.

• The first pages that I added was the register and login.

  • Doing the Register page was a bit challenging, because I wanted in a way and couldn't figure it out for a long time, but manage to do it.
  • At the end I finish with this code, here the function will check for token, username, userId, and if the radio button has been chosen as 'company' or 'volunteer'. This radio button will determine which homepage and profile page will be displayed.

  

  • This is how it looks like:

• When the user creates an account as a Company, after the login for some reason appears that the user is on the Volunteer home page.

• Building a full stack application on your own for the first time is something to be proud of. Problem solving and taking time to think through the errors has for sure given me some valuable experience prior to entering the industry.

• For me, my biggest win was to learn how to implement one-to-many and many-to-many relationships.
• Understanding serializers, translating django models appropriately for sending and receiving data.
• Being able to understand and use correctly many-to-many relationships.

• Make my search bar useful, so volunteers can search for a job or company.
• Add more styling on Register and Login page.
• Styling on home page.

• Django, and how useful it can be.
• Entity Relationship Diagrams for visualising tabular data and relationships.
• One-to-many VS many-to-many relationships