Corpstagram

I got to work on this project during my development training program while working at the Digital Corps.
The digital corps is an on-campus digital agency composed of many talented student of Ball State University, who each specialize in one of the multiple fields of the digital life, including graphic design, communication, audiovisuals, development or UI/UX design.

When a student gets hired at the Corps, they are given a training program that enables them to learn all the skills they need to get started working on projects, which ultimately leads to real-world experience on industry technologies, techniques and skills that they will have to apply later in their professional career.

As a member of the development team, I followed a training program which covered various aspects of modern web development, with an emphasis on React, and JavaScript/TypeScript oriented frameworks, like Adonis JS.

This project was the very last one of all the training program, and combined multiple aspects of web development (React, APIs, database design, authentication, data handling, ...) into one single app.

The goal was nothing less than to plan and build the back-end of a popular image and video sharing platform like Instagram, and hook it up to a React front-end.

Sounds pretty straightforward and fairly easy, right?

Well, that's what I thought when I first read the brief of this project.

Turns out that such an app is actually pretty complex, as one have to think about combining multiple different pieces together to get the intended result.

So, the very first step was obviously to define the structure of the database before anything else.

In order to do this, and since the point of this project was not to build a 1 to 1 clone of Instagram, I was told to build the database based on the pages found in the Figma mock-up files.

After a quick analysis, I was able to get a good picture of the different tables that I'd have to later create in Adonis JS to make it all work.

The next step was subsequently to create the database in the Adonis project using migrations.

Once the database built, I moved on to define the models, a way to tell Adonis JS what will be stored in the database tables, as well as the relationship between different fields, to greatly simplify the data workflow later on.

Then, I started to build the controllers for each table of the database, for each of the HTTP GET, POST, PUT and DELETE methods.

Once this fairly tedious step completed, I moved on to set up the routes of the API that would later be used by the front-end part of the app to get the required data. As I was linking the controllers to the routes, I also tested them one by one with postman to make sure everything was working.

Eventually, after long hours of tedious but somewhat comprehensive manual testing, I managed to end up with a back-end that was working as I wanted it to, and decided to call it a day.

It was now time to hook the existing React front-end to the freshly created Adonis JS API, using the fetch API, React's createContext and the React Router for routing and authentication redirection.

I loved to work on this project, just because it was my first real back-end centered project (which happened to also be using TypeScript!).

I learnt a lot about databases, API design and TypeScript along the way, and, even though I found it pretty hard to find the information I was looking for on the Adonis JS documentation, it also forced me to dig, sometimes very deep, into a framework's documentation to find what I was looking for, and learnt a lot of cool things while I was doing so.