Introducing WalGen: The Best Quote and Wallpaper Generator

Introdction

WalGen is a captivating combination of React, Outerbase, and the creative art of generating quotes and wallpapers. In this technical blog, we'll take you through the journey of building WalGen, from conception to execution, and explore the technologies that brought it to life.

What is Outerbase?

Outerbase is the all-in-one collaborative window into your database. Easily edit, manage, and run queries on your data without ever writing a single line of code.

Problem Statement

The requirements for the hackathon were:

Build an innovative open-source app with Outerbase
Build a plugin for the Outerbase platform.
Highest number of integrations

Our Solution

We built WalGen an open-source quotes generator and wallpaper generator web application. This is an all-inclusive app with quote generation, wallpaper generation, and combining the two to get a quote background.

Each user has a personal dashboard and can access all the features for FREE.

Inspiration

During the period of this hackathon, I came across a codepen that used webgl-fluid and it was very interesting to me.

From there I thought of an idea for a wallpaper generator using webgl-fluid. Then as a team, we discussed and brainstormed ideas and features for this application, and that's how we got started.

Features

Quote Generation
Create Quotes
Generate Wallpapers
Personal Dashboard

The Tech Stack

With the problem statement clear in our minds, it was time to choose the right tech stack for our project. Here's what we settled on:

Frontend

React: For building a dynamic and responsive user interface.
ContextAPI: To manage application state efficiently.
Tailwind CSS: For a sleek and intuitive design.
Figma: For designing the UI of the home page.

Backend

APIs

Ninjas API: The Quotes API provides a nearly endless amount of quotes from famous people throughout history.

Read more about it here or use it to create your applications.

Deployment

Vercel

Link to deployment - wallpaper-generator-711aivxxg-yagyesh-bobde..

Workflow

Development Process

At the start, it was difficult for us to start building because we were not familiar with the Outerbase platform. So we first started reading the official docs and exploring the platform.

Simultaneously, we started designing the home page UI design on #Figma.

After getting familiar with the platform and the completion of UI we started working on the technical aspects of the application.




import { BrowserRouter, Route, Routes } from 'react-router-dom'
import './App.css'
import Home from './pages/Home'
import Gallery from './pages/Gallery'
import Dashboard from './pages/Dashboard'
import WalGenerator from './pages/WalGenerator'
import Signup from './pages/Signup'
import Login from './pages/Login'
import Header from './components/Header/Header'
import QuoteGenerator from './pages/QuoteGenerator'
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <BrowserRouter>
      <div className="px-10">
        <Header />
        <ToastContainer />
      </div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/dashboard/profile" element={<Dashboard />} />
        <Route path="/dashboard/wallpapers" element={<Dashboard />} />
        <Route path="/dashboard/wallpaper-generator" element={<Dashboard />} />

        <Route path="/signup" element={<Signup />} />
        <Route path="/login" element={<Login />} />
        <Route path="/gallery" element={<Gallery />} />

        <Route path="/quotes-generator" element={<QuoteGenerator />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

Outerbase DB

Tables

quotes
wallpapers
users

Commands

GET Fetch Quotes: fetch all quotes
POST Create quote: create a new row in quotes tabl
DELETE Delete Quote: Delete a row in the quotes table
POST New User: create a new row in the users table
POST Login User: find the user in users table with email and password.
GET Fetch Wallpapers: Fetch all wallpapers of the user
POST Create Wallpaper: Create a new row in the wallpapers table

Project Demo

https://youtu.be/tR-4PEtLtbU

The Hackathon Outcome

WalGen is a testament to the creative possibilities that emerge when talented developers come together and leverage innovative technologies like React and Outerbase. It seamlessly combines the power of web development with the art of inspiration, providing users with a platform to discover meaningful quotes and create stunning wallpapers. As we continue to refine and expand this project, we hope to inspire others to explore the limitless potential of technology in the world of creativity and design.

All Links

Deployed Website: https://wallpaper-generator-2j2h.vercel.app
GitHub Repository: https://github.com/yagyesh-bobde/wallpaper-generator
Figma Design: https://www.figma.com/file/Mq0KjkfIwja0jAF0M2F2S7/Meal-Mate?type=design&node-id=6%3A458&mode=design&t=kFHeyxUduFfIdCwH-1
YouTube Demo: https://youtu.be/tR-4PEtLtbU

Team Members

Yagyesh Bobde (Team Leader)
Pranav Bobde (Technical)
Sumedh Bambal (Design)

This concludes our submission for our WalGen project in Outerbase hackathon.

Other Submissions

Our team has created another project, Meal Mate, which is an all-inclusive feature-rich meal planner application.

Read about our meal planner project : https://developerszone.hashnode.dev/building-a-meal-planner-a-journey-through-the-outerbase-hackathon

#Outerbase #OuterbaseHackathon #ReactJs #TailwindCSS #APIs

bobde_yagyesh