Department of Computer Science & Engineering

Bangladesh University of Engineering & Technology

CSE408 - Software Development Sessional

Software Project Documentation

September 10, 2023

Supervisor:
Tahmid Hasan
Assistant Professor

Prepared By:

Showvik Biswas Fabiha Tasneem Anup Bhowmik

1805068 1805072 1805082
Level-4, Term-1 Level-4, Term-1 Level-4, Term-1
Contents
1 Introduction 3

2 Project Features 3
2.1 User Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Email Verification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3 Profile Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.4 Employee Management . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.5 Order Placement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.6 Estimation and Budgeting . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.7 Comment Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.8 Work Progress Tracking . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.9 Payment Flexibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.10 Feedback and Reviews . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.11 Performance Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.12 Notification System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.13 Project Archive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.14 Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3 Technology Stack 5
3.1 Programming Languages . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.2 Frameworks and Libraries . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.2.1 Back-End Libraries . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.2.2 Front-End Libraries . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.3 Database Management . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.4 Server and Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.5 Version Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.6 Continuous Deployment & Continuous Integration . . . . . . . . . . . . 8

4 Conclusion 8
Showvik Biswas, Fabiha Tasneem, Anup Bhowmik

1 Introduction
• Project Name: CommuniCreate.

• Project Overview: CommuniCreate is a centralized system designed to stream-

line and regulate creative content production. Our part of the project specifically
focuses on two key areas: Order Confirmation and Payment System. Notably,
the project does not currently encompass the tracking of task progress or inter-
nal employee communication like Asana. Another lab group of our Information
System Design Course Team handled that part.

2 Project Features
2.1 User Management
• Creative Content Agency: Agency can create an account on behalf of their
company, and create advertisements, designs, posters, and videos for their Clients.
They can also add employees with specific roles.

• Client Company: Client can place orders for creative content and browse Con-
tent Agency Pages. Clients can also leave reviews after receiving content from
any Agency.

2.2 Email Verification

Agencies and Clients need to verify their emails to prove their authenticity.

2.3 Profile Management

A user can edit his/her own profile information such as email, profile picture, password,
phone number, address, etc.

2.4 Employee Management

An Agency can add employees with particular salaries and ratings. If needed, it can
modify all this information too. Employees can be upgraded or downgraded by their
Agency and get a changing in their rating.

2.5 Order Placement

• Client Side: Clients can browse the app, filter by tags, and view agency profiles.
They can provide project details, including tasks, the response deadline, and the
completion deadline. They can request specific agencies to create creative content
for them or broadcast a request to all agencies.

3
Showvik Biswas, Fabiha Tasneem, Anup Bhowmik

• Agency Side: Agencies accept the order if they like the offered request.

2.6 Estimation and Budgeting

After receiving requests, Content Agencies review the requirements and add necessary
tasks. Agencies assign tasks to employees and send estimated budgets to clients. Agen-
cies can add additional costs apart from the employees’ salaries if necessary too.

• Client Feedback: Clients review the estimated budget and provide feedback or
preferences to the agency.

• Budget Refinement: Agencies adjust the estimated budget based on client

feedback until both parties agree on the budget.

• Order Finalization: When the estimation is finalized and agreed upon by both
parties, an official order is placed.

2.7 Comment Section

We have implemented Real-time commenting and messaging between any employees of
the Agency and any Client of the Company. Threaded discussions are implemented for
organized communication.

2.8 Work Progress Tracking

When Agencies start working on the order, clients can monitor which tasks under that
project are complete. They can make payments according to that.

2.9 Payment Flexibility

Payment can be made through any bank, or online platforms available in SSLCommerz.
There are two types of payment systems available.

• One-Time Payment: Clients can make the full payment before or after project
completion or during any time of the process.

• Taskwise Payment: Clients can opt for partial payments based on task mile-
stones. Advanced payment can be made too.

2.10 Feedback and Reviews

Clients can provide reviews and share their experiences with agencies, contributing
to the agency’s reputation. Future clients can view these reviews to make informed
decisions.

4
Showvik Biswas, Fabiha Tasneem, Anup Bhowmik

2.11 Performance Summary

Agencies can view their performance in a variety of graphs in their dashboard.

2.12 Notification System

The system provides real-time live notifications at various stages of the project, keeping
clients and agencies informed.

2.13 Project Archive

The system generates an archive of the entire project, ensuring all project-related in-
formation is stored and accessible.

2.14 Search
Any User can search for any other users, Agency names, or Client Company names.
They can also search for any particular request or estimations that are owned by their
own Agency/Company. They can also filter the results using tags. An agency can
search for its own employees too.

3 Technology Stack
3.1 Programming Languages
Our whole project was based on JavaScript.
• Front-End: React.js (an open-source front-end JavaScript library)
• Back-End: Node.js (an open-source, cross-platform JavaScript runtime environ-
ment)

3.2 Frameworks and Libraries

3.2.1 Back-End Libraries
1. Passport.js: An authentication middleware.
2. Cross-Origin Resource Sharing (CORS): A middleware that allows or re-
stricts cross-origin HTTP requests.
3. Express.js: A web application framework for Node.js, used to build the backend
server and APIs.
4. JSON Web Token (JWT): A library for generating and verifying tokens
commonly used for authentication and securing APIs.

5
Showvik Biswas, Fabiha Tasneem, Anup Bhowmik

5. Sequelize: An ORM (Object-Relational Mapping) for Node.js.

6. SSLCommerz: A library for integrating SSLCommerz payment gateway ser-

vices.

7. UUID: A library for generating universally unique identifiers used for generating
transaction IDs for payment.

3.2.2 Front-End Libraries

1. Redux: It manages state in real-time

2. Material-UI: It provides pre-built components following Google’s Material De-

sign guidelines.

3. Semantic-UI: A CSS Framework that provides pre-built components for React

4. Next UI: A library for building user interfaces with React. It offers various UI
components and tools.

5. Bootstrap: A widely-used CSS framework.

6. Axios: It is a popular JavaScript library for making HTTP requests, often used
in React applications to interact with APIs and fetch data.

7. Yup: A library for schema validation.

8. Universal Cookie: A library for managing cookies in both server-side and client-
side JavaScript applications.

9. React Router: A library for adding routing capabilities enabling navigation

between different views.

10. React Hot Toast: It provides customizable and user-friendly notifications.

11. Lottie: A library for rendering animations and graphics created in Adobe After
Effects as JSON files.

12. Formik: A form management library for React that simplifies the process of
handling form input and validation.

3.3 Database Management

• Hosting Platform: Amazon Web Services (AWS). AWS Free Tier RDS System
is a promotional offering by Amazon that provides limited, no-cost access to AWS
services for a specified period, typically 12 months from the date of sign-up. Under
the AWS Free Tier, we were able to deploy and manage our database without
incurring initial costs, making it an economical choice for our development phase.

6
Showvik Biswas, Fabiha Tasneem, Anup Bhowmik

• Data Organization and Schema: We used VSCode’s PostgreSQL extension.

It is a PostgreSQL database management tool that allows us to create and manage
databases, tables, and queries. It also provides a graphical interface for viewing
and editing data. We also used PGAdmin4 to generate the ERD and to work in
a separate local database during our lab assessment.

3.4 Server and Hosting

• Back-End: This project is hosted at https://cpm-backend.onrender.com on a
free tier Render account. This adds to the limitation of back-end computing
resources being spun down with inactivity. The very first calls to the API will
likely be slow.

• Frontend: This project is hosted at https://communicreate.onrender.com/ on a

free tier Render account. The first run will likely be slow.

3.5 Version Control

• Version Control System: GitHub

• GitHub Organization: Our organization’s name was CPM-Creative Produc-

tion Management. We were all owners of the organization. Our supervisor was
also added as a member to observe our activities.

• Repositories: We had 2 repositories for our work.

1. Back-End Repository
2. Front-End Repository

• Scrum Board: We had one Scrum board to keep track of our work. This
approach followed Agile methodologies and promoted collaboration among team
members.

1. To-Do List: This list was to maintain what to do next.

2. Resources List: We also shared resources such as ERD, Scope presentation
slides, Project Architecture slides, notes, and so on in this section.
3. In Progress List: We had a list of ongoing work on the board to monitor
who was currently doing what.
4. Done List: To manage tasks that were completed, we kept this list.

• Issues and Milestones: Github issues and milestones were used to track tasks,
bugs, and project goals. We used Github issues for code discussions, feedback,
and collaboration on those issues. We assigned an issue to a particular member
who would solve it. After solving it, that assigned member closed the issue.

7
Showvik Biswas, Fabiha Tasneem, Anup Bhowmik

• Pull Requests: To discuss the workflow for code reviews and contributions, we
used pull requests in Github.

3.6 Continuous Deployment & Continuous Integration

For both the frontend and backend repositories, we defined CI/CD steps for building
and deploying the app. Then we connected the repository to Render and configured
build and deploy settings. When code was pushed, changes to the main branch triggered
automatic builds and deploys. CI/CD pipelines on Render streamlined the development
process by automating the deployment of code changes. Render’s CI/CD setup has
ensured that changes are quickly and reliably deployed to production.

4 Conclusion
The CSE408 course project was something that all three of us enjoyed. We are grateful
to our course instructors for always inspiring us to pursue this enriching experience
while also having fun. We are sure in the future we all will look back on this project
experience with fondness. And we hope this documentation serves as a proper guide
for future students.