Note

This project is currently in refactoring. I am planning to incorporate additional features, so the current state of the project reflects the progress made within one month.

🧾 Table of contents

• 🛠 Technologies
• 🧩 Features
• 📝 How It Works
• 📂 Videos
• 💡 Improvements
• Issues and their status

---

🛠️ Technologies

Important

The dependency for the websocket has been implemented in the back-end, but hasn't been used yet

Front-end: Angular, GSAP¹, Bootstrap, Typescript, RxJS, jquery, @auth0/angular-jwt

• Front deploy : Vercel

Back-end: Java, SpringBoot, Maven, PostGreSQL, JWT, Cloudinary, Email sender, Lombok, Spring Security

• Back deploy : Koyeb

Others: Postman

🧩 Features

Uberly offers various features tailored to three essential roles within the application: Admin, Driver, and Rider. Each role has specific capabilities designed to meet their needs and responsibilities.

1. Admin

• Full Access: Ability to manage and oversee all aspects of the platform.
• User Management: Create, edit, and delete users posts, comments, replies and pictures.
• Content Moderation: Review and manage posts, pictures & feedbacks from Drivers and Riders.
• System Configuration: Adjusting configurations for the application as needed.

---

2. Driver

• Create Posts: Ability to create posts to seek riders to go in journeys.
• Add Pictures: Upload pictures visible in their profile and in the explore page for other users.
• Submit Feedback : Provide feedbacks to other users in their profiles.

---

3. Rider

• Add Pictures: Upload pictures visible in their profile and in the explore page for other users.
• Submit Feedback: Provide feedbacks to other users in their profiles.

📝 How It Works

DEVELOPMENT IN LOCAL ⚙

Warning

Ensure that you complete the back-end setup before starting the application. Only after the back-end server is running you will be able to get the URL from the console. This step is crucial for the front-end to communicate correctly with the back-end.

BACK-END

1. In the back-end, you should change the PostgreSQL variables with your credentials:

SPRING_DATASOURCE_URL=*url*
SPRING_DATASOURCE_USERNAME=*username*
SPRING_DATASOURCE_PASSWORD=*password*

Once it's all set up, start the application in the back-end!

FRONT-END

1. After setting up the back-end server, you will see the Tomcat localhost URL (e.g., http://localhost:8080). Copy this URL and update the apiURL in your front-end code to make API calls to your local back-end server. Here’s an example:

apiURL = 'http://localhost:8080/api'

Tip

In the various services, I've left a comment with the same example I've provided here, so it's easier to switch between local and deployed versions.

2. To set up the project in local, run the following commands in the terminal:

npm i
npm install gsap
npm install jquery & npm install --save-dev @types/jquery
npm install @auth0/angular-jwt

Next, simply run the command ng s -o to start the front-end and you're done!

📂 Videos

LANDING.PAGE.mp4

COMMUNITY.PAGE.mp4

FORMS.mp4

HOME.PAGE.mp4

PROFILE.PAGE.mp4

ANOTHER.USER.S.PROFILE.mp4

EXPLORE.PAGE.mp4

404.PAGE.mp4

💡 Improvements

Text Messaging: Introduce a messaging feature that allows users to text each other and create group chats.

Google Maps API: Embed a Google Maps overview in posts to show the location where the driver wants to go.

Custom Status: Allow users to set a custom status with emojis on their profile, such as "💤 Sleeping" or "🧭 Traveling".

More Reactions: Enhance user experience by adding more reaction options to posts.

Settings Page Redesign: Upgrade the settings page to improve its UX and UI for a more user-friendly experience.

Issues and their status

Responsiveness: Currently, only the landing, community, and login/signup pages are responsive. (Resolving)

Warning for Large File Sizes: Implement a warning system to notify users if a picture is too large to post. (Untouched)

Filtering and Toggles: Fix an issue on the explore page where post menus stop working after applying and removing filters. (Untouched)

Viewing Followers Component: Necessary to know who is following you, since you can only see who you are following. (Resolving)

Back to top

Footnotes

1. GreenSock Animation Platform. A JavaScript library for creating high-performance animations. ↩