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