< JavaScript Projects >
BSound App - Revolutionizing Sound Rental in Berlin
The BSound App is a full-stack web application that allows users to explore, rent, and connect with the vibrant music scene of Berlin. Whether you're a musician looking for equipment or a music enthusiast seeking the latest events, BSound has you covered.
I built this full-stack application as a final project during a demanding 9-day individual sprint. I'm proud to share that it was not only one of the top projects but also one of the two winners among 15 outstanding projects, highlighting the quality and innovation that sets BSound apart.
Tools used
Figma | HTML | SCSS | MongoDB | ExpressJS | React | NodeJS | Bootstrap | Netlify | Render | axios
Executive Summary
- Objective: BSound simplifies sound equipment rental in Berlin by connecting users with gear owners.
- Problem to Solve: Overcoming challenges in finding and renting sound equipment for events in Berlin.
Concept and Design
- Core Idea: BSound facilitates the rental process by connecting sound equipment owners with those in need, fostering a sense of community by allowing users to connect directly and negotiate payment terms.
- Naming Concept: "BSound" combines "Berlin" and the essence of "Be sound" when pronounced.
- Design Origin: The design, wireframes, and prototypes were crafted by leveraging Figma.
- Payment Philosophy: Emphasizes a peer-to-peer approach, eliminating payment gateways. Users connect, discuss, and agree on payment terms.
- Contact Sharing: Users provide personal contact details, shared only after booking confirmation, ensuring privacy and trust.
Key Features and Search Functionality
- User Profiles with Avatar Upload. The user has a default avatar when sign up but it can be changed anytime.
- Sound Gear Listings with Descriptions and Prices.
- Booking System with Date Range Selection.
- Dual Search Functionality: Search Bar and Category Icons. Users can click on icons representing different gear categories for easy exploration.
Image Gallery
Home Page
- Explore Products: Dive into our diverse range of sound equipment, even without being a registered user. Conveniently navigate through our offerings and discover the perfect sound solution for your needs.
- User Access: Easily log in or sign up to access premium features and unlock the full potential of BSound. Seamlessly manage your bookings, list your equipment, and engage with the vibrant Berlin sound community.
- Stay Connected: Connect with us on social media via the footer links and explore our comprehensive About page to learn more about the BSound app, its mission, and the passionate community it serves.
Products Page
- Product Catalog: Immerse yourself in a vast catalog showcasing a variety of high-quality sound equipment. You have the flexibility to peruse sound equipment contributed by other users, available for your rental, alongside managing the products you've personally added where you can edit or remove it.
- Search Bar: Empower your search with our dynamic search bar. Effortlessly explore products by typing keywords.
- Category Icons: Six visually distinctive icons represent distinct categories of sound equipment. Click on any icon to instantly filter products, offering a quick route to the items that match your requirements.
- Direct Access to Product Pages: Dive deeper into the details of any product with a single click. Our Products Page serves as a gateway, allowing you to explore individual product pages for in-depth information and easy booking.
- User Menu: Access your user menu conveniently located at the top-right corner of the page. From here, you can navigate to your profile, or add new products to the BSound community (available when logged in).
Booking Page
Upon selecting the "Rent" button for a specific sound gear, you'll be directed to the booking page. Here, you can review detailed information about the chosen product, including its description. Utilize the date picker to select the desired rental period, confirming your booking with a simple click.
Booking Confirmation Page
After confirming your booking, a confirmation screen will display the selected dates, total amount, and contact details of the person renting the sound gear. Contact information may include their email or phone number. Additionally, you'll find a convenient button to return and explore more sound gears.
Profile Page
Your personalized Profile Page grants you the ability to edit crucial personal information such as your avatar, name, email, and password. Furthermore, you can seamlessly manage and review the sound gears you've listed for rental, along with accessing a comprehensive overview of your bookings. Concluding your experience, a straightforward logout option is conveniently available.
Error 404 Page
Embrace a user-friendly experience even in unexpected moments. Our custom 404 page is not just an error message; it's an opportunity to effortlessly redirect yourself back to the homepage with a single click. We believe in providing a seamless journey, even when the path takes an unexpected turn.
Ola
NodeJS App
Ola App - Where the surf community converges
Ola App is a vibrant social platform designed exclusively for surfers. It offers a community-driven space where surfers of all levels can connect, share experiences, and stay updated on the latest trends in the world of surfing.
Tools used
Figma | SCSS | Handlebars | NodeJS | ExpressJS | JavaScript | MongoDB | API | Cloudinary
Features
Landing Page with Immersive Video
The landing page welcomes users with the mesmerizing sight and sound of ocean waves. The navigation bar provides easy access to essential sections: "About Us," "Login," and "Signup."
Informative Carousel
An interactive carousel introduces users to various post categories. While previewing is available to all, full access is exclusively granted to registered users.
User Registration and Authentication
Ola App ensures a secure environment by requiring user registration and authentication to unlock its full potential. Routes are protected with middleware to validate user sessions.
Login Form
Signup Form
User Profile Management
Once logged in, users gain access to their profiles via a vertical navbar. They can personalize their profiles by updating avatars, names, and adding bios. They also can see their own published posts and have access to them to delete them or edit them.
Comprehensive Post Management
Users can create, read, update, and delete posts. Explore posts from other users, engage in discussions, and contribute to the vibrant surf community.
Category Filters and Search Bar
A user-friendly filtering mechanism allows surfers to browse posts by categories, making it easy to find content that aligns with their interests. They can filter the post by button categories but also by keyword through the search bar.
Integration with Third-Party API
We've thoughtfully integrated a third-party API tailored specifically for surfers. It provides valuable information to enhance the surfing experience.
Image Gallery
Divi's Drag Race - Interactive Game
This project involves the development of an interactive side-scrolling game. The game challenges players to control a character to navigate obstacles, collect items, and achieve specific goals.
Tools used
Figma | HTML | SCSS | JavaScript
Features
Game Overview
The game features colorful graphics and engaging visuals that enhance the player experience. It incorporates dynamically generated obstacles and rewards to provide a challenging and dynamic gameplay experience.
Technical Implementation
The game is developed using JavaScript, HTML and SCSS. Object-oriented programming principles are employed to manage player, obstacle, and game mechanics.
Gameplay Mechanics
Players control a character using keyboard controls (arrow keys). The character responds to movement inputs, allowing it to perform horizontal moves and execute jumps. The goal is to navigate through obstacles while collecting rewards to score points.
Objectives and Scoring
Players aim to collect positive obstacles to gain points (crowns) while avoiding negative obstacles that deduct points (lives). The game tracks the player's score and displays it in real-time on the screen. To win, players must achieve a specific score threshold.
Challenges and Strategies
The dynamically generated obstacles pose challenges for players. Strategies include timing jumps, prioritizing positive obstacles, and using quick reflexes to avoid negative obstacles.
Game Screens
Start Screen:
This is the game's starting screen
Gameplay Screen:
Here's a screenshot of the gameplay in action.
Victory! Winner Screen with Video:
A screenshot from the winner screen with an included video.You can restart the game pressing the button.
Game Over Screen:
This screen appears when the game is over. You can restart the game pressing the button.
Game Sounds and Music
In this game, various sound effects and music tracks are incorporated to enhance the gaming experience:
Start Game Button Sound:
When the player clicks the "Start your engines" button on the game's start screen, it emits a legendary phrase from Ru Paul, adding a fun and immersive element to the game.
Restart Game on Win Sound:
Upon winning the game and clicking the "Shantay you stay!" button, players are treated to more iconic Ru Paul phrase.
Restart Game on Loss Sound:
Similarly, if the player loses the game and chooses to restart and clicking the "lip sync" button, they'll be greeted with more legendary Ru Paul sound bites.
In-Game Music:
Throughout the game, a lively Ru Paul song plays in the background, providing an upbeat and enjoyable gaming soundtrack.
Next project
under construction