DEV Community

Cover image for The ultimate place for all your wallpapers !!
Tamal Das
Tamal Das

Posted on β€’ Edited on

5 4

The ultimate place for all your wallpapers !!

Overview of My Submission

Hello everyone out there.
It's my first time building with Appwrite and here's what I've built - WallHub

So what exactly is WallHub ?

WallHub is a webapp made with ReactJs , styled with Bootstrap 5.0, CSS and also using Appwrite, Docker as the backend. This webapp can be used to get acess to all the best quality UHD wallpapers for all your screens !!

After reading the docs, asking around in discord, watching tutorials, stack-overflow building this project of mine was a fun experience. This is my first time using AppWrite, Docker to build something and i really liked the way it came out. Excited to learn more and build some amazing stuffs.

The inspiration behind WallHub was pretty simple, i wanted to cover all the basics like Databases, Authentications, Buckets, Image upload, Image preview and so on my first time. So here it goes.


Submission Category

Web2 Wizards


Link to Code

Here's the link to the code, check it out !!

GitHub logo tamalCodes / appwrite-docker-wallHub

A basic demo application with ReactJS, using appwrite and Docker

WallHub !!

What is WallHub ? πŸ€”

WallHub is a webapp made with ReactJs , styled with Bootstrap, CSS and also using Appwrite, Docker as the backend. This webapp can be used to get acess to all the best quality UHD wallpapers for all your screens !!

Available Scripts πŸ‘Ύ

To setup the project in your local machine :

  • git clone the repository
  • npm install to run all the commands.
  • Replace the project IDs, endpoints with your own.
  • In Login.jsx change the URL for googleAuths.

What did i learn ? 🍁

Making this app was an amazing experience.

  • Got to learn about setting up Docker in your local machine.
  • Setting up config for Appwrite
  • Storing the registered user in the storage and creating a local session.
  • Using Google Authentication for signing up !!

Here's how it works βš™

image

Here's a sneak peek πŸ‘€

image

image

A demo of how it works πŸŽ₯

…

Additional Resources / Info

Architecture of the App βš™

login1 img


A sneak peek into the Homepage πŸ‘€
home page


Working demo πŸŽ₯


Thankyou

It was an awesome experience learning so much and i am really excited to go much further with all these. Hope you liked the mini project for the Hackathon !!
Have a good day.

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay