In this tutorial, you will learn how to develop a web application from scratch using modern technologies such as Elixir Phoenix, Next.js, and more. I will guide you step by step to build a Blog Platform that showcases these technologies. By the end of this tutorial, you will have a solid understanding of these technologies and the ability to build a reliable and maintainable web application.
This tutorial is suitable for anyone who wants to learn modern technologies like Elixir Phoenix for Backend and React Next.js for Frontend. You do not need any formal prerequisites to follow this tutorial. However, if you have some experience as a web application developer in other languages, you will find it easier and faster to grasp the concepts. If you are a junior developer or do not have much experience in Backend or Frontend development, you can still benefit from this tutorial as it provides detailed steps and explanations. You just need to spend more time and focus on the tutorial.
If you want to see the final result of this tutorial, you can check out this:
https://github.com/tanloiit2010/lani-blog-platform
What features are we going to build?
In this tutorial, you will create a simple Blog platform that allows users to view various posts written by different authors. In order to create posts and manage them, users need to register and log in to the Blog platform. Once they are logged in, they can write new posts and edit or delete their existing posts.
What technologies will we use?
For the frontend development, we will use the Next.js framework and some popular tools from the React ecosystem. These include React Query for managing server data state, React Hook Form for handling forms, Tailwind CSS for styling, and Headless UI for common UI components. We will also use NextAuth.js as our authentication solution.
For the backend development, we will use the Phoenix Framework to create the API that serves our frontend. We will use Ecto to interact with the MySQL database and Pow to secure our API with authentication.
Development environment
First of all, you need to set up your development environment:
- The Phoenix Framework provide the detail installation docs, so please follow these.
- For frontend side, please make sure you in Node.js 16.8 or later
- Please install MySQL as we will use it as our database.
Let’s begin our journey! Here is the index of the parts that we will cover one by one. We will start with the first one from the backend side.
- Part 1 — Getting Started with Your Backend Project by Developing a Post List API using Phoenix Framework and Elixir
- Part 2 — Developing APIs for Post Creation, Post Detail and Error Handling
- Part 3 — Setting Up a Front End App with Next.js and React to Build a Post List Page with Hard-coded Data
- Part 4 — Fetching Data from the Server with react-query and Creating the Post Detail Page
- Part 5- Develop Post Creation Page with useMutation from react-query
- Part 6 — Use Pow to secure your API with authentication features
- Part 7 — Implement the post author feature by connecting user and post data
- Part 8 — Secure the front end app with next-auth
- Part 9 — Develop the My Post page in frontend
- Part 10 — Implement update and delete post APIs
- Part 11 — Develop Update Post Page in Frontend
- Part 12 — Develop Delete Post Feature in Frontend
- Part 13 — What’s next?
