I recently applied for a job as a junior full-stack developer, and the coding challenge was obviously to build a full-stack app. I've built several REST APIs and consumed them locally since I started learning backend development roughly 6 months ago. This time, however, I decided to publish the app, and it introduced me to a whole new world, DevOps!
My first DevOps experience was with Azure two weeks prior. I'm adding some functionality to my passion project portionsandpassion.com and decided to build a backend with C# and dotnet. I'll let you know how that goes soon.
So back to my first full-stack app. A simple note-taking webapp. As I thought about publishing the backend so I could consume it, it dawned on me that there's nothing like Vercel or Netlify for the backend. I did a quick search (searching is an underrated developer skill; knowing where to find help makes you develop solutions faster) and found this resourceful YouTube channel, Pixegami and decided I would publish to AWS.
Architecture
Infrastructure as code
AWS CDK
Language: Typescript
Backend
Serverless hosting: AWS Lambda
Database: DynamoDb
Language: Python
Framework: FastAPI
Frontend
Framework: React
Language: Typescript
Styling: TailwindCSS
Build tool: Vite
Hosting: Netlify
UI
- Figma
Developer experience
Writing every part of the application changed how I approached each section; it made me more intentional in my choices. I think every developer should try at least once to gain some experience in all the other aspects of development.
Let's start with UI. As part of the Meta Front-end Developer Professional Certificate, I had to complete a module on UI/UX. That was the most difficult module for me. I kept wondering why I have to learn how to design this when I can code it. And the intricacies. You can literally build a fully functional prototype with all the user interactions in Figma.
The major thing I took away from that module was the micro-interactions in the user experience. Let your application speak to the user, because you will not be there to explain. Toast notifications and changing states on hover and click, just to mention a few.
My thought process while designing the UI was to determine what the simplest interface that will allow the user to perform all the activities as required in the user story.
Here's a link to my UI design: Note Pal UI
Backend
After the UI, I worked on the backend. The AWS CDK was quite intuitive to use, and it's well documented. It's also available in several languages. I decided to go with Typescript this time. For my next project, which will be with DotNet, I will try the CDK with C#. For anyone looking for a quick start, check out this tutorial.
I think infrastructure as code is pretty cool. The AWS management console is quite a lot to take in for newbies. Infrastructure as code let's you do all the things you would've had to do on the console by writing in your code. It saves you a lot of context switching
AWS Lambda is a serverless computing service that allows you to deploy, scale and manage your application pretty easily
The two backend languages I know are C# and Python. The requirement for the challenge was Python, and that's why I went with Python. I think I'll replicate it in C# and host it on Azure functions and compare the developer experience.
Why FastAPI?
I've been working with Django and DRF since I started Python backend in the Meta Backend Developer Certification, but Django is overkill for a lot of things. It's like you need a single room but have to take along the whole apartment building. FastAPI allows you to do just what you need to do: build an API. To deploy your FastAPI API to AWS Lambda, you need an ASGI adapter. Magnum is the go-to for FastAPI.
Frontend
Then, finally, the frontend. I've been a front-end developer for two years now. I love frontend. I'm a visual person; I like to see the beauty in what I build. I do React for the web and React Native for mobile. The majority of my projects have been with Nextjs, hosted on Vercel, but this time I decided to go with Vite and Netlify.
Vite is what it says it is: tres vite (French for very fast). Because I had a monorepo with my infrastructure, backend and frontend in one GitHub repo, I had to deploy the frontend with the Netlify cli and it was a good experience
Why Typescript?
Like almost every JavaScript developer, when I started with Typescript, I was wondering who decided to make a nice language like JavaScript complex with all this type stuff. Red squiggles everywhere, but I've come to appreciate Typescript. It catches a lot of bugs that would've otherwise been deployed. In my experience, Typescript is worth the extra code that you have to write.
So yeah, that's a summary of how I published my first full-stack app.
Try it out and let me know what you think.
https://notepalwebapp.netlify.app/
- KodjoCode