This is my biggest project so far and I learned a lot while working on it. The idea of the project is an app that lists companies like hair dressers, nail & massage studios and let's customers book their appointments online.

Companies may create an account and manage their staff, offered services, working hours and appointments. End users can check out a studio's page, view its services and book an appointment.

Technically, the companies' part of the app is a React SPA, built with Mui, whereas the end users' page is built with Next.js in order to have server-side rendering.

Both apps talk to a shared REST backend built with Nest.js and TypeOrm. A link to the backend's repository can be found in the Readme of the repository linked above.

My clone of Google's Keep app that I built using Angular, of course with reduced functionality. I did use some convenient components from Angular Material, like dialog, menu and ripples - but I would say, most of the things are implemented by myself.

The app is not connected to a real backend, all data, initial or added, is stored in browser localStorage. However, everything is set up in a way such that my data/api functions technically return the same shape as Angular's httpClient would do in case of a real backend. For a slight visual loading effect, I introduced some random amount of delay to all these functions.

Previously, when I wanted to show my projects to someone, I always shared my GitHub. But in the beginning of this year, I thought it was time to create my own website.

Since I also wanted to add a blog in addition to my projects, I decided to go with a static site generator. I did some research and was in fact about to start with Eleventy - when I somehow stumpled upon Gatsby. I immediately knew that Gatsby was my way to go, because, well, it uses React.

So, here is my page. I use markdown to write the content and then inject everything with transformer-remark. I use some other plugins as well, like e.g. the prism plugin, to do the code highlighting.

Introduction

I created this MPA movie web app to practice my React skills. The app is implemented in JavaScript (I really don't know why I didn't start with TypeScript earlier!), using React and React Router libraries and basic CSS for styling.

In general, the app fetches data from The Movie DB which requires an API key. So I had to implement some proxy logic to keep my key secret! There are two versions of the app.

Using my own simple proxy server implementation

In my first solution I implemented a simple backend in Express, where all requests from the frontend are sent to. The backend then constructs the respective request for TMDB and appends the API key.

Using Nginx and Docker

Later, I figured out that things could be solved way easier by using nginx. So I set up a server and dockerized it.

What you can do on the page

On the landing page, users can browse the current top movies according to TMDB. If the user is authenticated, he can also see his rating for the movie, or add or alter a rating, which then is stored in his list of rated movies. If the user is not authenticated, there is a link redirecting to the login page. Users can also create a guest session and then manage a temporary list of rated movies.

On the search page, users can search for movies by filtering genres (genre filter has OR-logic), actors and release years. Again, the user can see and update their ratings if authenticated.

The last page, the profile page, is only accessible to authenticated users and displays some user information (if available) and the users list of rated movies. Here, the user can also remove rated movies from his list.

I also had the idea of implementing some watchlist page, but, unfortunately, managing ratings is the only thing that is possible with both standard sessions and guest sessions.

Notes

Please note that there is no movie detail page implemented because I found it non-beneficial considering the purpose of this web page to add that feature. Users are instead redirected to the respective movie detail page on TMDB.

I hosted the Docker container (and my own backend solution ) on Render, so please note that the website may (very much likely 😀) take some seconds to load both cases, because Render spins down free instance services after some time of inactivity.

This is my first single page application I built with React to train the basic concepts, such as passing props, managing and lifting up state, css modules and useEffect.

At first, I tried to use the useContext hook to write the game logic, but I then decided that it would be a good opportunity to practice some Redux! So, the general game logic is now implemented using React Redux and the Redux toolkit.

Design is inspired by/copied from Google's Minesweeper.

This is my first (bigger) web development project after completing a web development bootcamp course, to practice the skills I acquired!

The web page is built with Express, EJS templating and a MongoDB Atlas database following the MVC pattern. I implemented some middleware for error handling, session-based authentication and CSRF protection for non-GET routes.

The website consists of a landing page where the three most viewed products are displayed, a product page, where you can explore categories and their products and a dynamic product detail page.

Users may add products to a shopping cart and/or login to see and manage their shopping cart. If the user is not logged in, the shopping cart will be temporary and will be deleted after a while of inactivity (alongside with all session data). If the user has a temporary shopping cart and then logs in, any temporary and potentially previously persisted shopping cart data will be merged and persisted in the database.

I hosted the app on Render, so please note that the website may (very much likely 😀) take some seconds to load, because Render spins down free instance services after some time of inactivity.