Bits and Bytes Diaries

Launchpad Application

Manage Links, Like Never Before!

Nikhil Kumar's photo
Nikhil Kumar
·

6 min read

Launchpad Application

Table of contents

Introduction to Grafbase

Grafbase enables developers to deploy GraphQL APIs faster with modern tooling. Grafbase believes focus on shipping products instead of building infrastructure. You can build and ship your API in minutes using code-first or schema-first configuration. The Grafbase workflow is built by developers, for developers to be efficient and elegant. Grafbase integrates seamlessly with your existing stack, and with the tools you already know and love.

for more details visit Grafbase.

Introduction to Launchpad

Introducing our cutting-edge application that empowers users to effortlessly save, organize, and access their bookmarks from a centralized platform. With our user-friendly interface, bookmark management has never been more seamless. Say goodbye to scattered bookmarks across various browsers and devices. Our application simplifies the process, allowing you to conveniently save your favorite websites in one centralized location. No more wasting time searching for that important link you saved days ago – it's all at your fingertips!

Do check out Launchpad.

Features of Launchpad

  • Centralized Bookmark Management

    • Our application provides a central platform for users to save, organize, and access their bookmarks. Say goodbye to managing bookmarks separately on different browsers and devices.

  • Cutting-Edge Interface

    • Experience a modern and user-friendly interface that makes bookmark management effortless and intuitive.

  • Instant Sharing

    • Effortlessly share individual bookmarks or curated collections directly to your social media profiles with just a few clicks.

  • Seamless Accessibility

    • Access your saved bookmarks from anywhere, on any device. No more limitations due to a specific browser or device.

  • Time-Saving Convenience

    • Retrieve important links instantly without wasting time searching through scattered bookmarks. Everything you need is right at your fingertips.

  • Secure and Private

    • Rest assured that your saved bookmarks are kept secure and private within the application, enhancing your online privacy.

  • User-Centric Experience

    • Our application is designed to prioritize your needs, enhancing your bookmark management experience and making it a tool you can't live without.

  • Eliminate Browser Restrictions

    • Our application lets you break free from browser-specific bookmark limitations, giving you more control over your saved online resources.

  • Enhanced Communication

    • The sharing feature integrates seamlessly with communication tools, allowing you to share bookmarks directly within your preferred messaging or collaboration platforms.

Project Functionality Overview

  1. Theme Control

    • Users can choose the light or dark theme from the theme control button. Please refer screenshots:

      • Light Theme

      • Dark Theme

  2. User Authentication

    • Register

      • You can register using your email, name, and password if you don't have an account.

    • Sign In

      • You can sign in using your email, and password if you have already an account.

  3. Manage Quick Links

    • Users have the ability to add or modify their links. This can be accomplished by either clicking the 'New Link' button or selecting the edit icon within the link card.

      • Quick Links

      • Add New Link

      • Edit Link

      • Validation on Link

  4. Quick Link Card Actions

    • Open the Link in New Tab

    • Edit Link

    • Share on Multiple Platforms

      • Share Click

      • Share Modal

    • Delete Link

      • Delete Click

      • Delete Modal

    • Copy Link

  5. Manage Profile

    • Open Profile

      • Update Profile

      • Update Password

      • Security

    • Logout

  6. Responsive App

    • Tab View

    • Mobile View

Project Pages Overview

  • Home (Public)

    • This page will be open to the public. When you're not logged into the application, you will discover details about the features and capabilities of the app.

  • Get Started (Public)

    • This page will be accessible to anyone. If you're not currently logged into the application, you'll have the opportunity to sign in or register in order to gain access.

  • Home (Protected/Private)

    • This page will be available to users who have logged in. Here, users can discover and manage all of their links effectively.

  • Profile (Protected/Private)

    • This page will be accessible to users who have logged in. Here, users can conveniently manage the details related to their profiles.

  • Page Not Found (Common)

    • This page serves as a wildcard for situations where a user attempts to access a page that is unavailable or does not exist for them.

Project Technologies

  • Grafbase

  • React with Vite

  • Tailwind CSS

  • Nodejs (v18.2.0)

  • AWS

  • Nginx

  • Letsencrypt

  • GoDaddy

  • MongoDB

  • Lottie Animations

Project Structure & Local Setup

  • You can find the source code on GitHub. Before going forward clone the repository.

  • This is a monolithic project consisting of three things -

    1. Grafbase Schema: launchpad/grafbase

      • Create a Grafbase account from here.

      • Add environment variables in the .env file inside launchpad/grafbase/

      • All Grafbase schema is available at *launchpad/grafbase/*schema.graphql

      • Variable names are available in launchpad/grafbase/sample-env-key.env

      • Get gist here

    2. React App: launchpad

      • Go to the root directory and add environment variables in the .env file inside launchpad/

      • Variable names are available in launchpad/sample-env-key.env

      • Get gist here

      • Run the following commands from the root directory.

          nvm use 
  npm install
  npm run dev

    3. Backend Server: launchpad/server

      • Go to the launchpad/server directory and add environment variables in the .env file inside the launchpad/server

      • Variable names are available in launchpad/server/sample-env-key.env

      • Get gist here

      • Run the following commands from the launchpad/server directory.

          nvm use 
  npm install
  npm run dev

NOTE: Please note that we are currently operating in the development stage and not using a production database for this project. While exploring the functionalities, please be aware that any data loss is not our responsibility. However, feel free to explore and interact with the system as needed.

Future Road Map

Currently, the project offers limited functionality. However, I have plans to expand its features and release updates in the near future. Stay tuned for upcoming enhancements!

  • Password Recovery: Implement a password recovery mechanism to help users regain access to their accounts.

  • Grouping of Links: Enable users to organize their links by grouping them according to specific categories or themes.

  • Category Addition: Introduce the ability for users to create and manage categories to better organize their content.

  • Team Collaboration: Facilitate collaboration by allowing teams to work together on projects and share resources seamlessly.

  • Enhanced Password Management for Links: Extend password management capabilities to links, ensuring secure and efficient access to valuable resources.

  • Feature Enhancement Requests: Provide users with the option to submit requests for additional features or improvements to contribute to the platform's evolution.

These planned features will undoubtedly enrich the user experience and enhance the platform's value.

Thanks, Note

Thank you for your generosity and commitment to the developer community. I'm excited to see how #Grafbase and #Hashnode continue to make a positive impact on the world of technology.

A product may start with bugs, but with time, dedication, and continuous improvement, it evolves into its finest form, showcasing the beauty of progress and innovation.

Grafbase HackathonGrafbaseHashnode