Utsav Bhattarai
Introducing ToolKit - The Web Verse of the unKnown useful Web Tools

Introducing ToolKit - The Web Verse of the unKnown useful Web Tools

Utsav bhattarai's photo
Utsav bhattarai
·

3 min read

Table of contents

H3llo 👋, Searching for the bunch of best tool which helps you in incredible way then Toolkit is excited to help you.

Introduction

Hi Readers aka awesome developer, This is my first hackathon project. It took me around 2 week to build this project, Participating in hackathon parallelly with studying Its bit harder but accomplishment of project's adrenaline hits different😘.

Introducing ToolKit

As the name says, ToolKit is the collection of bunch of Web tools that help us. ToolKit provides user friendly environment with the simple and cool features. The main focus of this app is to boost up the unknown web tools.

Personally, In this webverse, There are millions of useful unknown web tool but are neglected by the google. As a result, They are not ranked in google search box. Due to which This tools are placed in the bottom of the web where we can't found them. Tool-Kit is the simple approach to short out this problem.

Tech Stack⚡

  • React Js -> For Frontend

  • PlanteScale -> For Database

  • Tailwind Css -> For styling

  • Vite.js -> For development Tool

Quick Look🔥

Blog Img.png

Features ✨

There are not a lot's of features to show but It's just a web portal navigate to the useful tools.

  • User can explore the tools and easily use them by clicking on it.

  • It provides simple and user friendly environment.

  • It can be used as mobile web apps (It is responsive😂).

Building Process 🛠️

It's not a whole process of building it. It provides general idea about how it is built.

1. Frontend 🏢:

I was quite familiar with react So It wasn't hard to start. I just stared with yarn create vite. The motive of using Vite is It boost up the speed of react app. Writing stylesheet is quite hard to me so I used tailwind css for styling and I have also written some custom Css.

2. Rest Api 📝 :

For the most important part of web app, I have used express server for listening on Port 3001 to communicate with backend and started to make different end points to perform different actions. Some of end point are:

  • Getting all Tools.

  • Posting a tool and many more.

3. Database 🛢️:

I used PlanteScale as database. It was MySql based database so it was easy for me to use. I created the tables and only allowed the specific server to communicate with it.

CREATE TABLE tools (
    id INT NOT NULL AUTO_INCREMENT,
    PRIMARY KEY (id),
    name VARCHAR(240), 
    des VARCHAR(240), 
    link VARCHAR(240), 
    image VARCHAR(240)
)

Challenges I faced💪

Some of the challenges I faced:

  • It was my first time using PlanteScale. Although It was easy to use but At the beginning, It was hard to interact it with Node.js but it was worth of learning.

  • While Styling, There was lots of designing headache but I managed to solve it.

  • In the process of making endpoint, There was a pain to post the tool to the database using JSON data. After the huge googling, It was solved by this app.use(express.json());. In that moment, I was 😧.

  • At Last While deploying the server in Heroku was a big pain. I think I don't need to explain about it😂.

Links 🔗

Site: ToolKit

Source code: Github

Conclusion

At the end I want to thanks Hashnode and Plantscale teams for organizing this awesome event which helps the immersing developer to show their skill and improve it. I want to say that, I feel fear to participate in the hackathon but after the accomplishment this project and It's adrenaline change my mind. Although, It was simple project but I was enough to erased my fear towards participating the hackathon.

Want to taste the skill of immersing developer, Try it now

Once again, Thanks to Hashnode and Plantscale

Connect with me on twitter : @utsabdev

At Last, Thanks for Reading🔥

PlanetScaleHackathonPlanetScaleDeveloper