I decided to kick things off by building the UI first.

To get started, I took a moment to study the Figma file and find patterns, blocks and layouts that would allow me to plan how I would later structure the design in code.

I also exported all the assets needed for the UI into the project file structure, before starting to write the markup for the app.

I chose to start breaking down the UI into React functional components and style them individually using 

Once the UI was almost done, I started to switch my focus on the data-handling and the logic of the app.

To do so, I first explored the API that would be used to get all the videos with 

Then, I created API helper functions that I would then call from the corresponding component to retrieve the desired data.

Finally, I hooked the UI to the data, and handled other aspects of the app such as commenting, search field, video sorting and video suggestion.

A really cool YouTube "clone" that I built as part of my developer training journey while working at the 

In hindsight, I really enjoyed working on this project for multiple reason. The first one is that I found it really interesting to think about how a YouTube-like application would work under the hood.
The second one is that it really allowed me to learn more about React and data fetching techniques, as well as context and data management.

A really great project that really boosted my confidence to work on React projects.

CorpsTube

The CorpsTube project could be broken down into 2 different steps:

As far as the styling is concerned, I was given access to a Figma Draft file which laid out the basics of the UI of the app, as well as all the assets that I would need to build it.

When it comes to the videos, I didn't use the YouTube API, but used the Digital Corps' own YouTube API clone, created by former developer students specifically to practice on large scale REST API and perform CRUD operations, but without the limitations, complexity and the hassle inherent to using something like the real YouTube API.

As mentioned in the introduction, this project was part of the 

 portion of my developer training at the 

, a Ball State University agency of students, each specializing in a specific field of the current digital life.

The team is composed of UI/UX designers, project managers (PMs), developers, graphic designers, as well as communication and audiovisual specialists, who learn and work together on various real world projects.

Every new hire at the Corps is given a training program which essentially teaches the student everything they need to know in their preferred field (dev, UI, comm, etc.) to allow them to later work on real world projects for various clients.

I was no exception to the rule, and followed the "development training program", which allowed me to catch up on my React knowledge.

This project was one of many practice exercises focusing on React application.

Before building the website, all the agency developers, including myself, gathered and discussed the different technologies to use, and how we would split the work load between each of us.

After deciding which component(s)/page(s) everyone had to build, we set up a Git repository to easily collaborate and manage code history.

After that, we each worked on our assigned chunk of the website and committing the changed regularly to the GitHub repo, so that other people could keep track of what had been completed, and what remained to be built.

I personally took care of the markup and styling of the landing page, as well as the error page.
I also took care of implementing the mouse follower and the page transition with 

Design and development of the Pikoom student agency's website.

I really enjoyed working on this website for multiple reasons. The first one being that it truly meant something to me to be able to design and eventually build a website that would represent our whole student agency.

In addition, this project allowed me to express and develop my creativity during the design process, and I had the freedom to experiment with different things including colors, gradients, layouts, etc.

Finally, I really liked to be able to use an interesting JavaScript library (

) to build cool page transition, as well as a custom mouse follower.

Pikoom

In this project, I basically had two tasks: design and build the website.

First, I designed a low fidelity version of what I imagined the website should look like, along with other designers.

Once our Figma prototypes were somewhat polished, we set up an agency meeting to vote for one of the designs to be used.

In the end, my design was selected by the majority of the members.

The next step was naturally to build the website.

This website was designed and built for the Pikoom Student Agency, as part of an academic year-long project.

This ”Student Agency“ was made out of 30 students with various and complimentary skills, from design, though communication to programming.

I was a member of this agency myself, along with 3 other developers that helped me built this 

As an agency, we were required to be present on the internet. The first step was to open social media accounts (Instagram, Twitter, LinkedIn, etc.).

But we also needed a website to present the agency: our values, our goals, our members as well as all the projects we had been working on throughout the year.

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 

, 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 

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 

 for routing and authentication redirection.

A "clone" of a very popular image/video sharing platform built with 

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.

Corpstagram

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.

I got to work on this project during my development training program while working at the 

.
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 

, and JavaScript/TypeScript oriented frameworks, like 

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.

CorpsTube

Who?

Why?

What?

How?

Key Takeaways

Project Gallery