Kant journey to full stack
This article is about my internship at SCB Abacus, discussing my journey to becoming a full-stack developer intern and the various aspects of full-stack web development that they have learned and applied along the way. These include problem-solving with Leetcode, version control with Git and Git flow, understanding JavaScript and frameworks such as NodeJS, V8, and Express, creating an Express API with TypeScript, using an object-relational mapping tool such as Prisma and a cloud database like MongoDB Atlas, implementing JSON Web Tokens for authentication and authorization.
Through the process of working on these tasks as an intern at SCB Abacus, I have gained a wide range of experiences and skills that are essential for success as a full-stack developer. This includes:
- Proficiency in multiple programming languages and technologies, such as JavaScript, HTML, CSS, NodeJS, and TypeScript
- Experience with version control systems like Git and Git flow
- Understanding of web development concepts such as APIs, databases, frameworks, and libraries
- Familiarity with cloud platforms and tools for deployment and hosting
- Ability to work with and manage data through object-relational mapping and cloud databases
- Knowledge of security practices, such as implementing JSON Web Tokens for authentication and authorization
I will share experiences and lessons learned in the journey to becoming a full-stack developer intern at SCB Abacus and provides examples and visual aids to illustrate key concepts and techniques. The article is intended for those interested in learning more about full-stack development and looking for practical guidance on how to start and succeed in this field.
Pt.1 Leetcode Problems
Leetcode is an online platform for coding problems. The goal in solving each problem is to pass all test cases with the least runtime and memory usage possible. Doing leetcode helps understand basics of algorithms and creative problem solving when coding. This is very useful for a fullstack developer. Below are screenshots of problems I solved on leetcode
Pt 2. GIT and GIT flow
GIT is a version control system useful for tracking modifications. It was originally designed to help coordinate task amongst programmers. This is extremely useful in software development as an alternate copy of the source code and be isolated for further development and then merged back into the original file. All Changes after each merge can be tracked and traced.
These are the basic things about git:
- main branch, features branch
- local branch vs remote branch
- pull request
- merge branch
below is an example of GIT flow between 2 people 1 project where Kant is making changes and Lee is receiving changes.
Pt.3 Understanding JS, NodeJS, V8 and Express. Framework vs Library
javascript (JS) is a programming language that is run on the browser side instead of the server side.
Runtime environment is a software environment where code is executed
NodeJS is a runtime environment for JS build on top of V8 to allow javascript to run at the server side.
V8 is a JS engine within or outside browser which translates JS into machine code for the CPU to execute
Framework are pre written files catered to a specific type of project in which the developer can use as a starting point for their project
Library is a collection of pre build code that the software developer can use to perform specific tasks in their own project.
Pt.4 what is an API
API stands for application program interface. It is a set of protocols which allows different applications to communicate with each other. There are several types of API but the one I have made in my journey to becoming a full stack developer is a REST API. The diagram below sums up what a REST API is.
Basically it is the middleman between the front end (client) and the database(server).
Pt.5 create express API with typescript with hello world response.
Express is a node JS framework which allows the client(browser) to send HTTP requests to the API. A single HTTP request consists of a method, url and body. At this point we have no database so it is not yet a fully completed API
A HTTP method could be one of the following: GET PUT POST DELETE
The API will normally respond to the HTTP request with a HTTP response.
These responses also have status codes and many people will be familiar with “error 404".
Below is an example of what is expected in Pt5
Pt.6 Prisma ORM& mongoDBAtlas
Object relational mapping (ORM) is a programming technique which maps application domain model objects to the relational database tables. Below is a basic diagram of what Prisma is. Inside the ORM will be a Schema which identifies data and their persistent properties.
MongoDB Atlas is the cloud data base I have chosen to use for my first full stack project. Any other database such as SQL will be fine.
Pt.7 putting it all together to make a REST API (Pt5+Pt6)
Since the components of a REST API is ready, the express API needs to be able to send/receive HTTP request/response from Prisma in the following manner shown below:
Express — Prisma — MongoDB
This REST API is able to perform all possible HTTP Requests for the objects specified in my ORM. In my case these are users,
The screenshot below is an example of how the finished product should look:
Pt.6 Json Web Token for admin authorization & authentication
Authentication is verifying identity.
Authorization is is verifying roles and permission.
A person using a web application will have different roles corresponding to their JWT token. A JWT token can be generated upon successful login and will contain user information corresponding to their credentials. This token acts as an access key to allow the person certain permission and roles such as how admin can read/write data and user can only read data.
Pt.8 middleware
The middleware acts as a guard which only allows only authorized users to access resources. For instance, user can read survey but cannot create survey, on the other hand, admin can create survey. The middleware is basically a function the user HTTP request has to pass through before reaching the API.
Pt.9 Front End & React+SurveyJS
For my full-stack journey, I decided to use react as my front-end library. The front end is the medium between the user and the API. The process was to first build a working web app and then making it send/receive data from the API by using useEffect and axios. Each front-end library is different but React had a lot of specific learning curve such as Hooks and state management. I would recommend anyone learning to become a full stack developer to choose any library/framework you are comfortable with such Angular or VueJS
