CodePill
Where awesome codeSnippets build amazing projects
Learn the ins and outs of web development technologies and start building your own little (or bigger) projects right away.
Articles list
Please see below a list of all our articles:
MERN Stack App part 8 (Part 2 on User Authentication)
In the last part of the series we started working on user authentication . We will try to wrap everything up in this post so we can finally have a rounded app.
Also, if you'd like to build the whole project from scratch, you can do so by following This link .
This is only an excerpt from the article. Click the button below to read more.
MERN APP pt 7 (Intro to User Authentication)
Now it's high time we implemented user authentication because we do not want just anyone to access our application. Only our registered users should be able to do so.
This is only an excerpt from the article. Click the button below to read more.
MERN Stack App part 6 - React Routing
In the last post, we have implemented dark/light mode for our application and improved a bit more the interface and the user experience. Now it's time we added Routing .
Also, if you'd like to build the whole project from scratch, you can do so by following This link .
This is only an excerpt from the article. Click the button below to read more.
MERN Stack App part 5 -Dark and light mode, UIContext
In the previous article, we have documented our code (very important practice, I cannot stress enough the importance of this), refactored some more stuff and replaced the 'prop drilling' with a proper React context .
This time alongside some other UI improvements we are going to add dark and light mode toggling.
This is only an excerpt from the article. Click the button below to read more.
MERN Stack App part 4 - documenting the code, implementing react context
Last time we have implemented the full CRUD operations in our MERN stack calorie counting app. Next, we will document our code a bit, implement React Context and refactor a bit more. It is time to continue developing our app. In order to move on with this article, you will have to clone this repo .
Also, if you'd like to build the whole project from scratch, you can do so by following This link .
This is only an excerpt from the article. Click the button below to read more.
Full CRUD operations with the MERN stack
In the last article we have connected the MERN application we had built to a mongoDB cloud instance and now we can read from and write to the mongo instance.
This time we will complete the CRUD operations and do some improvements and refactoring to our application.
This is only an excerpt from the article. Click the button below to read more.
MERN Stack intro part 2 - connecting to MongoDB
Last time we have built a little React front-end, and we even hooked it into an Express back-end. It is time to continue our work and further develop our calorie tracker application. In order to move on with this article, you will have to clone this repo .
Also, if you'd like to build the whole project from scratch, you can do so by following This link .
Next, we will connect mongoDB to it and we will use the cloud version of this service.
This is only an excerpt from the article. Click the button below to read more.
Introduction to the MERN stack
It's high time we built a more complex project. We will now build a full-stack application calorie-counting app, and we will be able to use it on multiple devices at the same time. We will not store our data inside of LocalStorage anymore, but this time we will use a database.
The tech-stack we will be using is the MERN stack.
So on the front-end we will have a React application and on the back-end we will build an Express service that will communicate with a MongoDB database instance.
This is only an excerpt from the article. Click the button below to read more.
Intro to React with Test Driven Development
As you may or may not know, React is one of the most popular front-end libraries nowadays and during a web development project or at a job, you have all chances of bumping into it. It is very poweful and versatile a tool and we will have an introductory look at it in this article.
Furthermore, we will also have a look at the topic of Software Testing which basically means writing some code that tests your initial code and makes sure everything works properly and doesn't break. There are multiple types of testing (e.g. unit, integration, end to end, behavioural.. read upon them if you'd like to know more).
This is only an excerpt from the article. Click the button below to read more.
Introduction to GIT
We have written some code, built some projects, now it's time to think about how to store and maintain our codebase. The answer to that is a Versioning system.
As its name implies, this is a system to keep track of changes in our code and of release versions for our application.
The most popular versioning system today is undoubtedly Git.
This is only an excerpt from the article. Click the button below to read more.
Fastify Youtube Converter!
Fastify is a new NodeJS upcoming framework and it's gaining quite some popularity. As its name implies, it is supposed to be fast and performance benchmarks do indicate that. You can start reading on that here . While you are at it, we are going to build a Youtube Converter app.
This is only an excerpt from the article. Click the button below to read more.
Express REST API
After having built an Aplication Programming Interface (in short a REST API ) using core nodeJS so without using any framework, it is now time to explore Express, one of the most popular and widely used nodeJS frameworks. If you have missed my previous article, and have not yet built the first version of this project, you can do so by following this Link
This is only an excerpt from the article. Click the button below to read more.
NodeJS rest API!
An API Application Programming Interface is a critical component for both front-end and back-end developers as all of them consume data from these APIs in their apps. In this post we will too build a very basic NodeJS API that will allow us to perform CRUD Create Read Update Delete operations on our resources.
This is only an excerpt from the article. Click the button below to read more.
Node Static Server - image Gallery Project
As you know or might not know.. NodeJS is very good at serving dynamic data. So on our servers we can have complex logic that manipulates data, and 'serves' content dynamically based on that data. However, this time we will also exploit the capabilities of the runtime to serve static data (data that never changes and has just to be read by the 'client'). The project we will be building is a file uploader that will 'upload' images on our server and 'serve' them statically on a webpage, just like an image gallery. All social networks allow you to upload a picture and we'll do just that.
This is only an excerpt from the article. Click the button below to read more.
NodeJS miniprojects-logger!
It's finally the time to build some projects with actual functionality using NodeJS. For starters, we will build little applications but you will learn a lot from doing this. We will also implement everything using core NodeJS code and no framework for now. In this way, you will learn a ton about how the runtime works under the hood and how it handles stuff.
This is only an excerpt from the article. Click the button below to read more.
Intro to NodeJS!
This article is an introduction to the NodeJS runtime. In it, we will look at some basic concepts regarding the runtime, such as: JavaScript callbacks and asynchronous programming. It will also mention JavaScript Modules and some others. These things should teach you how a node web server works at a core level.
This is only an excerpt from the article. Click the button below to read more.
Intro to VS Code!
Before we get to writing any code or understanding what code is and how it works at all, of course we need a good code editor . In this first article, we will explore a bit Visual Studio Code and its capabilities. Of course we can write code on any sort of file (even in a plain .txt file with an editor such as notepad, and then converting the file into .html, .js or any other format that the computer can read, process and do awesome stuff with it).
This is only an excerpt from the article. Click the button below to read more.
Intro to web dev!
As the title involves, this article represents an introduction to web development. We will see very briefly how the web works and we will get a bit familiar with its main technologies (namely HTML , CSS and JavaScript). Finally, after 'getting our feet wet' a bit, and understanding how everything works, we will build a little project together.
This is only an excerpt from the article. Click the button below to read more.
