Building a Full-Stack App with React, Express, and Chakra UI
In today’s fast-paced world of web development, choosing the right technologies for your project can be a daunting task. As a self-taught full-stack developer, I’ve often found myself scouring the web for tutorials that build out entire applications from scratch, demonstrating features commonly seen in real-life apps. This kind of resource helps developers across a broad spectrum of skill sets and experience levels.
Getting Started
Before we dive in, make sure you have a clear understanding of basic JavaScript concepts and some familiarity with ES6 syntax. You should also have used React at least once and have some knowledge of common concepts like states, components, and renders. Additionally, you’ll need to be familiar with the concept of REST APIs, have used a relational database, and have experience with Node.js and Express.js for a web server app.
Laying the Groundwork
Before starting any new project, it’s essential to plan out your features and workflow. Let’s make a plan for how our app will work. Our app, called “Photato,” will have two main parts: a client-side React app that lets users upload photos through their browser, and a server-side API that receives photo uploads, stores them, and allows us to query and display all uploaded photos.
Setting Up the Frontend
We’ll start by creating our frontend React app using create-react-app. We’ll also use Chakra UI for component styling, which allows us to customize its look and feel through theming easily.
Setting Up the Backend
For our backend API, we’ll create a new file and install the necessary dependencies, including Express and Sequelize. We’ll also set up a .babelrc file to enable writing our app using the latest ES6 syntax transpiled through Babel.
Building the Photo Gallery
We’ll start by creating an App.js file and filling it with code that simplifies our entry component and delegates the actual logic to another container named AppContainer. We’ll then create a Header component that wraps all its children in a Chakra UI Flex component, and a PhotoGallery component that renders a gallery view of uploaded photos.
Handling File Uploads
We’ll use the Multer package to handle file uploads, which makes it super easy to accept and store files. We’ll add a new POST request endpoint that uses the upload middleware to handle file uploads and save the file details in the database.
Connecting the Frontend and Backend
We’ll use the browser’s Fetch API to talk to our server app from the React app. We’ll create a new file that encapsulates our server communication and adds functions to get photos and upload photos.
Finishing Touches
Finally, we’ll add some UX improvements, such as displaying a toast notification when a photo is uploaded successfully or unsuccessfully, and implementing a full-screen version of the gallery using the react-images package.
Conclusion
What we’ve built throughout this journey is a complete and functional app, but there’s still room for improvement. Architecture, file-folder structure, testability – all of these things should be considered for refactoring both our client- and server-side apps.