Scribd
Upload
8 views

Front-End Hackathon (1)[1]

The document outlines guidelines for a hackathon project focused on creating a Real-Time Collaborative Workspace for various use cases, such as coding, student projects, or marketing campaigns. Participants must submit a project proposal detailing their title, use case, core features, and chosen technologies, followed by a progress review meeting. Key features include real-time collaboration, user authentication, workspace management, and optional advanced features like voice chat and permissions management.

Uploaded by

abanoubphelpssaweris
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Front-End Hackathon (1)[1]

The document outlines guidelines for a hackathon project focused on creating a Real-Time Collaborative Workspace for various use cases, such as coding, student projects, or marketing campaigns. Participants must submit a project proposal detailing their title, use case, core features, and chosen technologies, followed by a progress review meeting. Key features include real-time collaboration, user authentication, workspace management, and optional advanced features like voice chat and permissions management.

Uploaded by

abanoubphelpssaweris
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Hackathon Project Guidelines:

Real-Time Collaborative Workspace

NeuronetiX
Ahmed Gamal
8 September 2024

Front-End Hackathon 1
Overview
The goal of this project is to build a Real-Time Collaborative Workspace where
multiple users can collaborate on a shared project in real-time. The workspace can be
adapted to various use cases, from teams working on code, students collaborating on
their graduation projects, to creative professionals working together on marketing
campaigns. You are encouraged to choose or create your own use case that suits your
interests and tailor the workspace accordingly.

Project Proposal
Before you begin working on the project, we require each participant to submit a
proposal. The proposal should include:

• Project Title: A descriptive title for your workspace.


• Chosen Use Case: Explain the use case you’re building for (e.g., students
collaborating on a graduation project, remote development team, etc.).

• Core Features: List the main features you plan to implement.


• Technologies: Mention the frontend framework (React.js, Next.js, Vue, Angular)
and BaaS platform (Supabase, Firebase, or others) you intend to use.

Progress Review Meeting


On 21 September, we will have a progress review meeting to check in on your
project. During this meeting, you will:

• Showcase Features: Present the features you’ve implemented so far.


• Discuss Challenges: Share any challenges or obstacles you’ve encountered during
development.

• Plan the Next Phase: Discuss what features you plan to add in the next phase of
development.
This meeting will help ensure that you are on track and allow us to provide feedback
and suggestions for improvement.

Front-End Hackathon 2
Project Description
Participants will develop a web application that enables multiple users to work
together on a shared project. The type of project depends on the use case you choose
whether it’s a coding platform, document collaboration, task management, or
something else entirely. The application should support real-time updates, allowing all
users to see changes as they happen. Additionally, users should be able to
communicate with each other and manage di erent workspaces.

Key Features
1. Real-Time Collaboration:

• Implement real-time updates for shared content. Changes made by one user
should be immediately visible to others.

• Use WebSockets or similar real-time communication technologies (e.g., Socket.io)


to manage live data updates, or any real-time database.
2. Use Authentication:

• Implement a basic user authentication system, enabling users to sign up, log in,
and create personal pro iles.

• Allow users to invite others to collaborate on speci ic workspaces.


3. Use Case Customization:
- Choose your own use case for the workspace, or create your own. Possible use cases
include:

• Remote Software Development Team: A collaborative platform for developers


to work on code in real-time.

• Students Collaborating on Their Graduation Project: A workspace designed


for university students working together on a graduation project.

• Agile Project Management Tool: A workspace for teams to manage sprints,


tasks, and user stories in real-time.

Front-End Hackathon 3
f
ff
f
• Marketing Campaign Collaboration: A platform for marketing teams to work
on campaigns together.
- You can also create your own use case, adapting the workspace to a unique use case
that excites you.
4. Document/Workspace Management:

• Users should be able to create, edit, and delete projects or workspaces.


• Provide a dashboard where users can view and manage all their workspaces.
5. Real-Time Noti ications:

• Notify users of important updates, such as changes made to the project, new
messages, or users joining the workspace.
6. Real-Time Resolution:

• Handle editing con licts gracefully, ensuring that multiple users can work on the
same content without issues.
7. Responsive Design:

• Ensure that your application is fully responsive, providing a smooth experience on


both desktop and mobile devices.
8. Version History:

• Implement version history to allow users to view previous versions of a project


and revert to earlier versions if necessary.
9. Real-Time Chat System:

• Include a chat system that allows users to communicate within the workspace
while collaborating.

Front-End Hackathon 4
f
f
Backend-as-a-Service (BaaS) Recommendation:
We recommend using a Backend-as-a-Service (BaaS) platform like Supabase or
Firebase to handle the backend. These platforms o er ready-to-use services such as:

• Authentication: Easily implement user authentication and management.


• Real-Time Database: Synchronize project changes across users instantly.
• Storage: Store iles securely and manage uploads.
• Hosting: Deploy your application using Firebase Hosting or Supabase’s hosting
solutions.
Using BaaS will simplify backend development and allow you to focus more on the
frontend and real-time collaboration features.

Technical Requirements:
• Frontend Technologies: Participants should use modern frontend libraries and
frameworks like React.js, Vue, or Angular to build the UI. Focus on scalability and
performance.

• Backend-as-a-Service: Use a BaaS platform like Supabase or Firebase to handle


real-time data synchronization, authentication, and backend services.

• Version Control: Implement version control for documents or projects, using the
BaaS platform’s database to store versions.

• Deployment: Deploy the application to a platform like Vercel, Netlify, or Firebase


Hosting.

Front-End Hackathon 5
f
ff
Project Deliverables
• Source Code: Provide the full source code with instructions on how to set up and
run the application locally.

• Live Demo: Deploy the application and provide a live demo URL.
• Documentation: Include documentation that explains the architecture, key
decisions, and how to use the features.

Optional Advanced Features


• Permissions Management: Allow project owners to set permissions for
collaborators.

• Voice or Video Chat Integration: Add live voice or video chat to enable real-time
discussions.

• User Presence and Cursor Tracking: Display the presence of other users in the
workspace, including where they are currently working.

Project Completion and Evaluation


We understand that this project is quite ambitious and that it may not be possible to
complete everything within the given time frame. The goal is to do as much as you
can and focus on delivering the best possible work. The evaluation will be based on
how much you accomplished, the quality of your implementation, and the creativity
of your approach.

Good luck, and we look forward to seeing what you create!

Front-End Hackathon 6

You might also like