Company Portfolio CMS (React)
Case Study
Introduction
"Company Portfolio CMS" is a web app for creating websites.
It's a content management system: users can create pages for projects, update those projects, and
upload images.
Admin dashboard
Objective
The aim of the project was to build a web application using full-stack JavaScript technologies
to
showcase for my portfolio.
The problem to be solved was building the complete frontend and the admin environment from
scratch. I wanted to understand: how and where can I addtext and images and how can I get
the data and display it?
I wanted to understand: how and where can I add text and images and how can I get the data and
display it?
Start screen of portfolio
Context
The application was part of my practise to build skills
in React, connecting to a database and implement the UI.
A content management system is what I have been using
for my work so far so it was something I can relate to
and I was curious how it could be built.
Project detail page
Approach
To build an app that enables website creators to add information, there had to be the server-side, that stores all the data, and the client-side, that has the user interface to enable the user to interact with all the information.
List of all projects
1. Step: Create the Client Side
In the first part of building the app, I created the components with React.
The main view component contained the app routing.
The main view displays a dashboard with linked elements to the parts of the CMS and the actions
the user can take.
2. Step: Connect to database
The second step will be to create a database. For this I will use Firebase again as it has built-in services that saves time and lets me concentrate more on the frontend.
App.js with component structure
All media
All pages
Project overview
Project editing
References page
Reflection
It was challenging to understand the general structure of React and the use of props and state, how
things are connected, how data is passed between components and how it can be accessed in the
database to be used in the functions.
Duration + Next Steps
Both parts of the application together, the server side and the client side, took me about 2 months.