S3 File uploader project

Hi everyone, in this post I will share my experience building a file uploader to S3.

Table of contents

• Project overview
• Goals and objectives
• Project management
• Technical Overview
• Lessons Learned**
• Recommendations for Future Projects
• Experience with the project

If you want to read all the story and have more details about my experience with the project go to Experience with the project or if you just want to see the general results of the project read below:

Project Overview

• Project Name: CIT-S3-FILES-UPLOADER
• Duration: 11 Hrs 39 Mins
• Team Members: Solo
• Objective: Learn how to use AWS S3 Service

Goals and Objectives

• Original Goals: How to use AWS S3 Service
• Were the Goals Met?: Yes, I have a better understanding on what is the general process for using AWS S3 on a NUXT app.

Project Management

• Project Tracking Tools: WakaTime for the coding hours, github issues, and nothing more
• Were Deadlines Met?: No, I have to take more time that the expected because I didn’t take in mind that I never have used Nuxt for past apps.
• Reasons for Missed Deadlines (if any): Because I didn’t take in mind the time to learn the new technologies used in the project

Technical Overview

• Technologies Used:
  • Nuxt (Frontend and backend)
  • PostgreSQL for saving information related with the user and the images
  • AWS S3 for store the resources
• Technical Challenges:
  • Use Nuxt (First project ever made using this technology, I have previous experience with vue and nodejs)
• Solutions to Technical Challenges:
  • Search for information on official sites like nuxt documentation, aws documentation, alongside watch some tutorials for get a guide in how to do somethings.

Lessons Learned

• What Went Well:
  • The challenge to learn new things on this project (Nuxt and how to interact with S3)
• What Could Have Gone Better:
  • Considering the time to learn the new things in the deadlines for the project.
  • Take more time for planning the project
• Improvements for Future Projects:
  • Time for planning the project
  • A new perspective of how to use some cloud technologies for solving some problems (storage for example)

Recommendations for Future Projects

• Recommended Changes in Process:
  • Search for a methodology for improve the way for creating the project
  • Search for content about how to estimate better the projects
• Recommended Changes in Tools and Technologies:
  • Try a 70-20 approach for the next project (70% of the technologies used I need to have previous experience with, 20% new and 10% for improvements or changes)

Experience with the project

This project was created for learn how to use S3 and when I was selecting the stack for the app, I wanted to work with something similar to Nextjs, the reason for not choosing next was to find an alternative that have a good developer experience when running the Development environment.

And because I have previous experience with vue I decide to try Nuxt. So the project stack ended like the below image

Also one thing that I don’t intend to do at first, but have to, was to add users to the app. So it’s now time to look at the project structure.

Because we are using Nuxt, the folders and files structures follows the framework structure.

The project it’s made with typescrip and tailwinds css, this time I don’t use an external UI Component library like PrimeVue , flowbite or similar.

Nuxt experience

My general thoughts about nuxt js (at least with this project) are:

• Good development server
• Good documentation
• My major problem was to adapt to how nuxt do the things, sometimes I go on automatic and tried to do how are in Nextjs

S3 experience

It was more easy that I expect, my expectation was that I will have more troubles using S3 on nuxt and that will cost me more time. But with the documentation of AWS and some videos for learning about IAM and see how to do an integration with Nextjs, becomes more like how to adapt what I see to my current problem and modify the things that I don’t liked

Database

In this project I did something different, instead to going to the typical ORM for the queries and building of the tables, I decide to use RAW SQL, just because feel like a small project where I can try more tools of sql, like triggers, views, stored procedures and functions.

Here is the script for creating the database tables

CREATE TABLE users(
    id serial PRIMARY KEY,
    username varchar(255),
    PASSWORD varchar(255)
);

CREATE TABLE images_list(
    id serial PRIMARY KEY,
    id_user int,
    name varchar(255)
);

ALTER TABLE images_list 
ADD CONSTRAINT FK_USERS FOREIGN KEY (id_user)
REFERENCES users(id)

CREATE TABLE translog (
    id serial PRIMARY KEY,
    username varchar(255),
    file_name varchar(255),
    stamp timestamp DEFAULT CURRENT_TIMESTAMP
);

With this tables I create a store procedure for create users

CREATE OR REPLACE PROCEDURE
cit_create_user(
    p_username varchar(255),
    p_password varchar(255)
)
LANGUAGE plpgsql AS $$
DECLARE repeated INT;
BEGIN
    -- Validate if the passed username is valid

    SELECT COUNT(*) INTO repeated FROM users u
    WHERE u.username = p_username;

    IF repeated >= 1 THEN
        RAISE EXCEPTION 'username_already_taken';
    END IF;

    INSERT INTO users(username, password) VALUES(p_username, p_password);
END
$$;

This for mention somethings related to the database, in general the PostgreSQL instance where more related to store the name of the files being upload and being linked to the correct user just to be able to retrieve them from S3.

Final words

The app ended being really funny to work on, I wasn’t expecting that the project ended up taking me more that 5 hours, I swear that with 2-4 hours will be enough, bud I minimize the time that can take to adapt to a new stack, I will consider this for further projects.