JobSculpt a Freelancing Website

Project report submitted in partial fulfillment of the requirement for the award of the Degree of

BACHELOR OF TECHNOLOGY

In

COMPUTER SCIENCE AND ENGINEERING

SUBMITTED BY:

ASHISH RAWAT
(Registration No.: 211302019)
Btech CSE General (7th Sem)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

FACULTY OF ENGINEERING AND TECHNOLOGY

SGT UNIVERSITY, GURUGRAM (14pt.)

(Batch: 2021-2025)
 Acknowledgment

I would like to express my sincere gratitude to Dr Staffy Kaur, Assistant Professor, at Shree Guru
Govind Singh Tricentenary University, for her invaluable guidance, continuous support, and
constructive feedback throughout this project. Her mentorship played a crucial role in its successful
completion. I am also thankful to the faculty members of the Department of Information Technology
and Engineering for their encouragement and assistance during various phases of this project. A
heartfelt thanks to my friends and peers for their constant motivation and helpful discussions, which
greatly contributed to the development of this work.

ii
 List of Figures

S.N Caption Page No.

o

1. Landing Page 11

2. Login and Sign up Page with Google oAuth v2 11-12

3. Forget password page 12-13

4. User Role Selection Page 13

5. Completing the profile page 14-15

6. Employer and Freelancer Profile 15-16

iii
 CONTENTS
Topic Page No.

Acknowledgment ii
List of Figures iii
Contents iv- v

CHAPTER 1 INTRODUCTION 1

CHAPTER 2 OBJECTIVES 2

CHAPTER 3 TECHNOLOGIES USED

3.1 Frontend

3.2 Backend

3.3 Database

3.4 Authentication

3.5 Search &Filtering

3.6 Hosting

3.7 Version Control

3.8 Others

CHAPTER 4 FEATURES AND FUNCTIONALITY

4.1 Landing Page

4.2 Login & Sign Up

4.3 Forget Password

4.4 User Role Selection Page

iv
 4.5 Employer and Freelancer Profile Page

CHAPTER 5 DATABASE DESIGN

CHAPTER 6 SYSTEM ARCHITECTURE

CHAPTER 7 IMPLEMENTATIONS

CHAPTER 8 CHALLENGES FACED

CHAPTER 9 CONCLUSION

CHAPTER 10 FUTURE ENHANCEMENTS

CHAPTER 11 REFERENCES

v
 CHAPTER 1: INTRODUCTION

The JobSulpt Freelancing Website is an innovative platform designed to bridge the gap between
freelancers and employers, fostering seamless collaboration and efficient project management. The
platform caters to a wide range of industries and skill sets, providing users with a comprehensive suite
of tools for creating professional profiles, discovering opportunities, and managing job applications.
This website leverages modern technologies like React.js for the frontend and Node.js for the backend,
ensuring a responsive and intuitive user experience. By integrating advanced functionalities such as
image editing, skill management, and resume creation, the platform aims to enhance the usability and
efficiency of freelance job hunting.
Additionally, the project incorporates industry-standard security measures, including JWT
authentication, and employs robust backend services to ensure data integrity and scalability. Through
the use of Cloudinary for image hosting and Tailwind CSS for UI design, the website offers both
aesthetic appeal and high performance.
The primary objective of this project is to provide a user-centric platform that simplifies the hiring
process for employers and helps freelancers showcase their skills effectively, ultimately creating a
thriving ecosystem for both parties.

1
 CHAPTER 2: OBJECTIVES

The primary objective of the JobSulpt Freelancing Website is to create a robust and user-friendly
platform that connects freelancers with hiring employers, facilitating seamless communication and
collaboration. The key goals of the project include:

1. Streamlining Job Search and Hiring: Enable freelancers to easily discover relevant job
opportunities and allow employers to find skilled professionals for their projects.

2. Efficient Profile Management: Provide freelancers with tools to build detailed profiles,
including work experience, education, and skills, enhancing their visibility to potential
employers.

3. Enhancing Usability: Implement intuitive interfaces and features such as image editing,
resume creation, and skill proficiency selection to improve the overall user experience.

4. Ensuring Data Security: Incorporate industry-standard security measures, including JWT

authentication, to protect user data and maintain platform integrity.

5. Leveraging Modern Technology: Use cutting-edge tools like React.js, Node.js, Cloudinary,
and Tailwind CSS to deliver a scalable, secure, and visually appealing web application.

6. Facilitating Collaboration: Allow employers to manage job postings effectively and review
freelancer applications, fostering a productive work environment.

2
 CHAPTER 3: TECHNOLOGY USED

Frontend
 HTML5: For structuring the web pages.

 CSS3: For styling and layout design.

 JavaScript: For adding interactivity and dynamic behaviour.

 React JS: Framework of JS for making client-side websites

 Tailwind: For responsive UI.

Backend
 Node.js & Express.js: To create the backend api's

 RESTful API: For data exchange.

 CORS: Cross-Origin Resource Sharing gives the functionality to limit our API to a particular
frontend URL.

Database

 NoSQL using MongoDB: For storing and managing data.

Authentication

• JSON WEB TOKENS: For storing the session.

Search & Filtering

• NoSQL Queries for efficient data retrieval using Mongoose package manager.

Hosting

• Renderer Cloud services.

Version Control

• GitHub for code versioning.

Others

• React icons for icons.

• Email Integration for authorization and other security notifications using node mailer.
• GSAP & Lotty files for creating animations.
3
 CHAPTER 4: FEATURES AND FUNCTIONALITY

Landing Page

Responsive landing page with clear CTAs.

Fig 1: Landing Page

Login & Sign Up

Implemented secure login/signup with email and Google OAuth for seamless user authentication using
JWT.

4
 Fig 2: Login & SignUp Page
Forget Password

Secured password reset using Email verification.

Figure 3: Forget Password Page

5
 Figure 4: Forget Password Email

User Role Selection Page

Choose a role: Freelancer or Employer easily.

Fig 5: User role selection

6
User can choose their role as a freelancer or a hiring employer.

Completing the Profile Page

Completing profile by adding profile image and skills

Fig 6: Completing Profile Fig 7: Completing Profile

Profile photos are dynamically saved to the Cloudinary CDN.

7
 Figure 8: Updating Profile

Users are required to choose a unique username. If the username is already in use, a notification will be
displayed, preventing progression to the next step. Subsequently, users must provide their full name,
date of birth, and a brief description about themselves.

Employer & Freelancer Profile Page

Create and manage profiles for freelancers/employers.

Fig 10: Freelancer Profile

Fig 9: Freelancer Profile

8
 Fig 11: Employer Profile

Figure 12: Employer Profile

9
 CHAPTER 5: DATABASE DESIGN

Designed a scalable and efficient database schema in MongoDB, leveraging its NoSQL flexibility to
accommodate dynamic and hierarchical data. Collections are structured as follows:

 Users Collection: Stores freelancer and employer data, including roles, unique usernames,
profiles, and authentication credentials (Google OAuth and JWT).

 Jobs Collection: Contains job postings with fields for title, description, skills required,
employer details, and application tracking.

 Applications Collection: Tracks freelancer applications, including cover letters and application
statuses.

 Skills Collection: Maintains a list of predefined skills with proficiency levels (Beginner,
Intermediate, Advanced).

 Media Collection: Manages image uploads, leveraging Cloudinary URLs for storage.

10
 CHAPTER 6: SYSTEM ARCHITECTURE

Developed a modular system architecture leveraging the MERN stack for scalability and
maintainability:

 Frontend: Built with React.js, providing a dynamic and responsive user interface with
components styled using Tailwind CSS and Material UI.

 Backend: Developed with Node.js and Express.js, implementing RESTful APIs for seamless
communication between the client and server.

 Database: MongoDB, designed with a flexible schema to handle diverse user data and
relationships efficiently.

 Authentication: Secure user authentication using JWT for sessions and Google OAuth for
third-party login.

 Media Storage: Integrated Cloudinary for efficient image hosting and retrieval.

 Security: Enforced industry-standard security practices, including input validation, password

hashing, and secure API endpoints.

 Deployment: Deployed using scalable cloud platforms ensuring availability and performance.

11
 CHAPTER 7: IMPLEMENTATION

Implemented a freelancing platform using a modern MERN stack architecture, integrating advanced
functionalities for an optimized user experience:

 Frontend: Built responsive and dynamic interfaces with React.js, leveraging reusable
components and state management for seamless navigation.

 Backend: Designed a RESTful API with Node.js and Express.js, ensuring efficient handling of
user requests and interactions with the database.

 Database: Structured MongoDB collections to store user profiles, jobs, applications, and
media, enabling efficient queries with indexes for scalability.

 Authentication: Secured user sessions with JWT-based authentication and Google OAuth for
simplified signup/login options.

 Features:
o Unique username validation during registration.
o Dynamic profile creation for freelancers and employers.
o Image upload and editing using Cloudinary integration.
o Skill-based job recommendations and application tracking.

 Styling and UI: Used Tailwind CSS and Material UI to deliver a clean, professional, and
responsive user interface.

 Email Integration: Integrated Nodemailer for automated email notifications.

12
 CHAPTER 8: CHALLENGES FACED

While developing the freelancing platform, several challenges were encountered and effectively
addressed:

1. Validation Username: Ensuring uniqueness required implementing real-time checks with

database queries, which was optimized for performance.

2. Integration of Google OAuth: Managing third-party authentication and seamlessly merging it

with existing user data posed initial difficulties but was resolved with proper OAuth token
handling.

3. Database Schema Design: Structuring MongoDB collections to balance flexibility and

efficiency required careful planning and testing.

4. Image Uploads and Editing: Integrating Cloudinary with real-time image preview and
alignment features required additional handling for responsive design.

5. Conditional Component Rendering: Ensuring smooth re-rendering of dynamic components in

React.js for tasks like profile updates and skill selection.

6. Cross-Browser Compatibility: Styling and UI behavior needed adjustments to ensure

consistent performance across different browsers.

7. Security Implementation: Protecting sensitive data with JWT, password hashing, and
validation against common attacks like SQL injection and XSS demanded rigorous testing.

8. Real-Time User Feedback: Providing instant error messages (e.g., for invalid usernames or
skill selection) required efficient frontend-backend communication.

13
 CHAPTER 9: CONCLUSION

In conclusion, the development of the JobSulpt freelancing platform successfully bridges the gap
between freelancers and employers by offering a secure, scalable, and feature-rich solution. The project
leverages modern technologies, including the MERN stack, to provide a seamless user experience,
ensuring efficient profile creation, job management, and skill-based recommendations.
Through the integration of Google OAuth, Cloudinary, and industry-standard security practices, the
platform is equipped to handle user needs reliably while maintaining data integrity. The challenges
faced during development were instrumental in refining the system architecture and enhancing the
overall robustness of the application.
This project serves as a testament to the potential of modern web development frameworks in building
intuitive and impactful solutions for real-world problems, laying the foundation for future
improvements and scalability in the freelancing ecosystem.

14
 CHAPTER 10: FUTURE ENHANCEMENTS

Real-Time Messaging: Implement a chat feature to enable direct communication between freelancers
and employers for smoother collaboration.

1. Advanced Recommendation System: Integrate machine learning algorithms to provide more

accurate job and freelancer recommendations based on user preferences and history.

2. Mobile Application: Develop a mobile-friendly application to expand accessibility and

enhance user engagement on the go.

3. Payment Gateway Integration: Add a secure payment system to facilitate transactions

between freelancers and employers directly on the platform.

4. Multi-Language Support: Introduce support for multiple languages to cater to a global

audience.

5. Performance Analytics: Provide detailed insights and analytics for both freelancers (e.g.,
profile views, job applications) and employers (e.g., job reach, applicant quality).

6. Freelancer Portfolio: Allow freelancers to showcase their work portfolio, including projects,
testimonials, and certifications.

7. Employer Rating System: Introduce a feedback and rating system for employers to improve
trust and platform transparency.

15
 CHAPTER 11: REFERENCES

1. Documentation:

o React.js Official Documentation: https://react.dev/

o Node.js Official Documentation: https://nodejs.org/
o MongoDB Documentation: https://www.mongodb.com/docs/

2. Libraries and Tools:

o Tailwind CSS: https://tailwindcss.com/docs
o Material UI: https://mui.com/
o Cloudinary API: https://cloudinary.com/documentation
o Formik: https://formik.org/docs/overview

3. Authentication and Security:

o JSON Web Tokens (JWT): https://jwt.io/introduction/
o Google OAuth: https://developers.google.com/identity

4. Email Service:
o Nodemailer: https://nodemailer.com/about/

5. Deployment and Hosting:

o Rendrer Documentation: https://render.com/docs
o Cloudinary for Media Management: https://cloudinary.com/documentation

6. General References:
o MDN Web Docs: https://developer.mozilla.org/

16