🎈

Rocky Essel

A Frontend Developer.

I'm a quietly confident, naturally curious web developer, that loves improving, trying out different idea designs, and coding them out. And my goal is to work in a company where I can deliver business value while also leveling up as a developer.

  • Archive
  • Resume
KlaudBoxKlaudBoxKlaudBoxKlaudBoxKlaudBoxKlaudBox

Project Overview - KloudBox

KloudBox is a web application developed by me, that serves as a file cloud storage service, designed to store and manage user files. The platform allows users to upload their files, generate a link to the file, and easily share it with others. The project was started on 12th February 2023 and built using Next.js and Tailwind CSS for the front-end, and Node.js for the back-end.

Tools and Technologies

  • Front-end:

  • Next.js
  • Tailwind CSS

  • Back-end:

  • Node.js
  • AWS EC2 virtual server

  • CMS:

  • Sanity.io

  • Language:

  • TypeScript

Using these tools and technologies allowed me to efficiently and effectively build KloudBox, providing a reliable and scalable solution for file storage and sharing.

Why I chose these tools

Front-end:

I used Next.js and Tailwind CSS, two popular web development frameworks that allow for efficient and flexible development of responsive web applications. Next.js is a React-based framework that provides server-side rendering, automatic code splitting, and easy client-side routing, making it a great choice for building modern web applications. Tailwind CSS is a utility-first CSS framework that allows for easy customization and consistency in web design.

Back-end:

I used Node.js, a popular server-side JavaScript runtime that allows for fast and scalable development of web applications. Additionally, the backend REST API was deployed on an AWS EC2 virtual server, providing a scalable and reliable infrastructure for the application.

CMS:

I used Sanity.io CMS, a headless CMS that allows for easy management of content without being tied to a specific front-end. Sanity.io provides a user-friendly interface for creating and managing content, making it easy for non-technical users to update and maintain the website.

Features

KloudBox features an easy-to-use user interface and provides the following functionalities:

  • File upload and management
  • Automatic file link generation with an expiry date
  • CMS integration using Sanity.io
  • Built with TypeScript for added robustness
  • Restful API deployed on AWS EC2 virtual server
  • Unique sharing features for guest users

Challenges Faced

During the development of KloudBox, several challenges were encountered, such as:

  • Programmatically creating and deleting directories in the backend
  • Persisting data using LocalStorage in Next.js on the frontend

Despite the challenges encountered, I was able to overcome them by writing my own custom code.

Conclusion

The entire project was written in TypeScript, a statically typed superset of JavaScript that provides better tooling, type checking, and code organization, making it easier to write and maintain large-scale web applications.

Overall, the use of these tools and technologies allowed me to efficiently and effectively build KloudBox, and provide a reliable and scalable solution for file storage and sharing.

Old UI

[@portabletext/react] Unknown block type "image", specify a component for it in the `components.types` prop

[@portabletext/react] Unknown block type "image", specify a component for it in the `components.types` prop
Written by

Rocky Essel

I'm a quietly confident, naturally curious web developer, that loves improving, trying out different idea designs, and coding them out. And my goal is to work in a company where I can deliver business value while also leveling up as a developer.

Like what I do?Hire me