# Launchpad Application ### **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](https://grafbase.com). ### **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.](https://launchpad.whoisnikhil.com/) ### **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** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692075075705/ad3a03bb-08fe-4968-919b-42f41b3f1edd.png align="center") * **Dark Theme** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692075099319/a94bb4b2-1079-4f2e-8288-f180b967c539.png align="center") 2. **User Authentication** * **Register** * You can register using your email, name, and password if you don't have an account. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692076820382/cd82f859-feb9-4f11-8c87-b8845932274c.png align="center") * **Sign In** * You can sign in using your email, and password if you have already an account. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692076845216/a7473199-7f1b-47cb-884c-164ccae3ec08.png align="center") 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** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692076954169/6fad9f28-d499-49ef-a4f7-37fd41b6feb1.png align="center") * **Add New Link** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692076990096/0edcc669-220b-4db9-87e4-d6584ed40891.png align="center") * **Edit Link** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692077065601/23c882f2-6a5c-41ae-8f8b-8c87c806aafc.png align="center") * **Validation on Link** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692077009596/e98059a9-75db-40c9-9c87-c11dc6556a36.png align="center") 4. **Quick Link Card Actions** * **Open the Link in New Tab** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692078868201/534d8bb5-34a0-4bb9-bb61-51792c50e895.png align="center") * **Edit Link** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692078899512/8a6a507e-d7d5-4909-9da6-4837c28d0fb2.png align="center") * **Share on Multiple Platforms** * **Share Click** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692079074495/5c11d471-e681-4e03-a049-7ab37b90552b.png align="center") * **Share Modal** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692079089567/90ba5be3-84a2-4d62-a554-46cbaf5c1781.png align="center") * **Delete Link** * **Delete Click** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692079260227/fd9a3b17-1844-45f3-84a3-7da90b2a69c1.png align="center") * **Delete Modal** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692079270798/4f39bad5-c5eb-48e7-b72a-c64705edaf46.png align="center") * **Copy Link** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692079556673/7a5cbcb1-a73f-4869-9aef-58f04461b69b.png align="center") 5. **Manage Profile** * **Open Profile** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692080556291/d379103a-5bec-4f92-ac3f-2e29ce7ad4db.png align="center") * **Update Profile** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692080577825/942663b8-9e77-40fe-9138-caf86fccdaf9.png align="center") * **Update Password** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692080603604/f34a52ca-bcae-4863-84b8-485520ab1e5c.png align="center") * **Security** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692080616177/1edd6d3a-67eb-449c-afa8-8fac8b94941f.png align="center") * **Logout** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692080632966/e5da1c6d-50cb-4ee9-b5a8-191f06539903.png align="center") 6. **Responsive App** * **Tab View** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692081500136/49b9c59f-d13f-4cb0-b2e2-9a752b834751.png align="center") * **Mobile View** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692081525513/22f826d6-4461-4d29-aa00-8cb850cd927d.png align="center") ### **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](https://github.com/nikhilkrdwivedi/launchpad). Before going forward clone the repository. * This is a monolithic project consisting of three things - 1. Grafbase Schema: *launchpad/grafbase* * Create a [Grafbase account](https://grafbase.com/sign-up) 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](https://gist.github.com/nikhilkrdwivedi/fb7c33094863b733b73bf00ba6a1cd01) 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](https://gist.github.com/nikhilkrdwivedi/68fa0e29ffe66fed29c4132ff0077dfe) * Run the following commands from the root directory. ```bash 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](https://gist.github.com/nikhilkrdwivedi/464ee3f2210136ac25db88a36d9d1df6) * Run the following commands from the *launchpad/server* directory. ```bash nvm use npm install npm run dev ``` ### Important Links 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. * [Launchpad Website](https://launchpad.whoisnikhil.com) * For demonstration purposes, please utilize the following credentials: * Email: [**demouser@whoisnikhil.com**](mailto:demouser@whoisnikhil.com) * Password: **Demo123.@** * [GitHub Source Code](https://github.com/nikhilkrdwivedi/launchpad) * [Grafbase Domain](https://grafbase.com/nikhilkrdwivedi/launchpad) ### 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**.