Forem: James Oyanna

Developing a fullstack E- commerce Application with Typescript. Part 1

James Oyanna — Sat, 14 Oct 2023 14:45:37 +0000

E-commerce application is like an online shopping mall on the internet.
It lets you browse, select, and buy products online. You can shop from the comfort of your home, add items to a virtual cart, and complete your purchase with a click of a button. You can also make payment for a product using your debit or credit card.

In this article, we'll be building a robust e-commerce application.

We'll be working on both the frontend and backend, combining React and Node.js to create a seamless shopping experience.

In this section we will be developing the backend of the e-commerce application.

In part two of this article, we will be developing the frontend of our e-commerce application.

Now we will start by creating the backend of our e-commerce project. Make sure you have nodejs installed on your system.

Create a folder. Name it backend.

Next, we'll initialize our backend application by first setting-up the project package.json and add the necessary dependencies.

Setting Up Node.js package.json:

Then run the following command:
npm init -y
to initialize a new project. Using the -y flag when creating a package.json will approve all the defaults.

Now let's add Add TypeScript as a dev dependency by running this command:

npm install typescript --save-dev

Now let's add type definitions to our Node.js application through its @types/nodepackage.

This will enable us to write TypeScript code that interacts with our Node.js APIs and modules in a type-safe manner.

run this command:
npm install --save-dev @types/node

Create a tsconfig.json file:

tsconfig.json files serves as configuration file for TypeScript compiler settings.

Inside this file, we will specify a variety of options to customize the behavior of the Typescript compiler according to our needs.
Run the command:
npx tsc --init

This will add a tsconfig.json to the root of your backend folder.
Remove the default configuration and the following code:

Here we setup a configuration file for typescript. We specify the ECMAScript target version to be es5.

Now let's update our package.json file and also add dependencies we will need for this project.

Change the index.js file in the main section to this -"main": "server.ts",
Under the script section, add "start": "nodemon server.ts",

Now let's add some of the dependencies we will be using for this project by running the following command:


 npm i @types/bcryptjs @types/express @types/jsonwebtoken @types/mongoose @types/morgan @types/multer @types/supertest bcryptjs colors.ts cors express express-async-handler jsonwebtoken mongoose morgan multer @types/cors nodemon supertest @types/node dotenv ts-node

You install each package separately if you want.

Your package.json file should now look like this.

Setting up the file structure:

Now lets setup our file structure for our backend API.

This will define how different components of our application will interact.
This is to ensure the organization and maintainability of our project.

backend
|-- config/
|   |-- db.ts
|-- controllers/
|   |-- orderController.ts
|   |-- userController.ts
|   |-- paystackController.ts
|   |-- productController.ts
|-- data/
|   |-- models/
|   |   |-- orders.ts
|   |   |-- products.ts
|   |   |-- users.ts
|   |   |-- reviews.ts
|   |-- db.ts
|-- middleware/
|   |-- authMiddleware.ts
|   |-- errorMiddleware.ts
|-- models/
|   |-- index.ts
|   |-- orderModel.ts
|   |-- productModel.ts
|   |-- userModel.ts
|-- routes/
|   |-- orderRoutes.ts
|   |-- paystackRoutes.ts
|   |-- productRoutes.ts
|   |-- uploadRoutes.ts
|   |-- userRoutes.ts
|-- types/
|   |-- express.ts
|   |-- index.ts
|   |-- order.ts
|   |-- product.ts
|   |-- user.ts
|-- uploads/
|   |-- image.png
|-- utils/
|   |-- generateToken.ts
|-- .env
|-- server.ts
|-- package.json
|-- seeder.ts
|-- tsconfig.json
|-- README.md

Let's take a look at what the folders represents.
config: Contains configuration files including database configuration (database.ts).

controllers: Holds controller files responsible for handling different parts of our application routes.

models: Contains Mongoose models (e.g., User.ts, Product.ts) that define the structure and shape of our database documents.

middleware: It houses the middleware functions that we will use in our application routes, such as authentication and validation and error middlewares.

routes: It defines the route files (e.g userRoutes.ts, productRoutes.ts) that specify the API endpoints and route handlers for various parts of our application.

types: It contains the TypeScript type definitions (e.g., user.ts, product.d.ts) for data structures used in our API.

uploads: We will use this folder to store temporary uploaded images.

utils: We will use it to store utility functions or helper modules that we will use throughout our API.

.env: This file stores environment variables including sensitive configuration data and settings.

server.ts: This is the main entry point for our application. We will use it to set-up the Express server, load environment variables, configure routes and middleware, and listen for incoming requests.

package.json: Contains metadata about our API and its dependencies.

tsconfig.json: The TypeScript configuration file that specifies how TypeScript should compile our code.

Setting-up a simple server:

Firstly, let us add a .env file. We will use it to store configuration and sensitive information like database credentials that our application will need.

In your root directory, create a file. Name it .env and add the following code:

PORT = 5000
Here, we added a port number that our application will listen on.

Now let's create a simple server.
Inside your backend directory, create a file. Name it server.ts and add the following code:

Here in this code above, we are setting up a basic Node.js web server using the Express.js framework.

This server will serve as the foundation for building our e-commerce web API.

We start by importing the necessary packages and modules. These include express, cors, and morgan.

We then define a constant PORT that represents the port number on which our server will listen.

We determined this value by checking the process.env.PORTenvironment variable. If process.env.PORT is not defined (or falsy), we default to use port 4000.

Next, we created an instance of the Express application by invoking express(). Later, we will use this to configure our routes and middleware.

We use the cors middleware by calling app.use(cors()).
This middleware enable Cross-Origin Resource Sharing (CORS).

It will allow the server to respond to requests from different origins (domains).

Next, we then configure the server to parse incoming JSON data from request bodies using app.use(express.json()).
This middleware parses JSON data and make it accessible in the req.body object.

Next, we set up request logging using the morgan middleware. It logsHTTP requests and responses to the console.

We defined a single route using app.get("/", ...) that handles GET requests to the root path ("/").
When aGET request is made to this path, the server responds with the message "API IS RUNNING...".

We started our application by calling app.listen(PORT, ...).
It listens on the PORT we defined earlier.

Connecting our API to a MongoDB Database:

In this section, we will be establishing a connection to a database.

To ensure that you have a MongoDB database instance set up and running, you'll need the connection URI for your MongoDB database.

You can either use a local MongoDB server or a cloud-based service like MongoDB Atlas.

You can follow the steps in this article to install and use it locally on your system.- How to get started with MongoDB

We have already installed the Mongoose package in our project during setup.

If you are using a local setup of the MongoDB database on your project, create a database using the MongoDB compass copy your connection string and add it to your .env file like this:
MONGO_URI = mongodb://localhost:27017/commerce-app

Inside the root directory(i.e backend folder), create a folder. Name it config.
Inside it, create a file. name it db.ts and add the following code:

Here in this code, we have a module responsible for connecting to a MongoDB database using the Mongoose library, which is a popular library for working with MongoDB in Node.js.

We imported the mongoose library, which allows us to interact with MongoDB.

We then defined an async function named connectDB.

We are using this function to establish connection to the MongoDB database.

Inside the connectDB function, we first check if the MONGO_URIenvironment variable is defined in the process.env.

If the MONGO_URI environment variable is defined, then we connect to the database using mongoose.connect.

This function returns a promise that resolves to a connection object (conn) when the connection is successful.

We also check if an error occurs during the database connection attempt, we catch the error and log an error message.

We call the process.exit(1) to terminate our API process with an error exit code.

Lastly, we exported the connectDB function so it can be available to use in our server.ts file.

Now, let's make the database connection by importing the connectDB function into our server.ts file and then invoke it.

Your server.ts file should now look like this:

In this code, we have added two lines to configure environment variables and to establish a connection to the database.

dotenv.config() : Here,we imported the dotenv package and called its config() method.
dotenv is used to load environment variables from the .env file into process.env.

connectDB() : Here, we invoke the connectDB function, which we imported from "./config/db".

This initializes the connection to the MongoDB database. The connectDB function is responsible for establising connecting to the database using the MongoDB URI we specified in our environment variables in this case, MONGO_URI.

Adding Types:

TypeScript types and interfaces are defined and used to enhance the type safety and readability of our Express.js application.
Let's add types for the express.
Create a file inside the types folder. Name it express.ts and add the following code:

Here in this code, we we start by importing specific types (Request, Response, and NextFunction) from the "express" package.

These types are used to describe the request, response, and next function that are commonly used in Express web applications.

We use aliasing (as) to rename these types to Req, Res, and Next, respectively, for convenience.

Next, we defined a custom TypeScript interface called User.
We use this interface to describe the structure of user-related data that can be attached to the Express request and response objects.

It includes properties like _id (a string representing a unique identifier for the user), name (the user's name), email (the user's email address), and an optional property isAdmin (a boolean indicating whether the user has administrative privileges).

Finally, we create TypeScript type aliases (Request, Response, and NextFunction) that combine the imported Express types (Req, Res, Next) with the custom User interface.

The Request and Response type alias combines the Req & Res type (representing an Express request and response object) with the User interface.

This means that when you use Request or Response in your code, you'll have access to properties defined in the User interface in addition to the standard request or response properties.

Now let's add the User types. Still inside the types folder, create a file. Name it user.ts and add the following code:

Here in this code, we defined the TypeScript interfaces and types that we will use together with the Mongoose library to model and interact with user data in a MongoDB database:

We start by defining an interface called User. This describes the structure of a user document in our MongoDB database.

It includes the name, email, password, and an optional isAdminflag.

Next, we created an interface called UserDocument, which extends the User interface and Document type provided by Mongoose.

This interface represents a document in our MongoDB collection that corresponds to a user.
It inherits the properties from User and includes an additional method matchPassword.

We will use this method to compare a provided password with the stored hashed password and return a Promise of type boolean.

Lastly, we define an interface called UserModel, which extends the Model type from Mongoose and specifies that it works with documents of type UserDocument.

We will add an index.ts for exporting our types. Create a file in types folder. Name it index.ts and add the following code:

export * from "./user"; export * from "./express";
The index.ts file is using TypeScript's module exports to re-export modules and types from other files.

Later, we will be adding other type definitions for our orders, products, etc. For now, let us implement the user model.

Implementing the User model:

Inside the models folder, create a file, name it userModel.ts and add the following code to it:

Here in this code, we are defined and configured a Mongoose model for a user in our API that interacts with our database.

We start by importing necessary dependencies. bcrypt is used for hashing and comparing passwords securely.

model and Schema are from Mongoose, a MongoDB Object Data Modeling (ODM).
We also imported UserDocument from the types module.

Then, we created a Mongoose schema (userSchema). This defines the structure of user documents in the MongoDB collection.

It includes fields for name, email, password, and isAdmin, each with their respective data types and validation rules.

We set the timestamps option to true, which automatically creates a createdAt timestamp in each user document.

We defined an instance method called matchPassword.
This method is available on user documents we created with this schema and we are using it to compare an entered password with the stored hashed password.
It uses bcrypt.compare() for secure password comparison.

We then defined a pre-save middleware. It runs before the user model is saved to the database.

The middleware checks if the user's password has been modified. If not, it calls the next function to proceed.

If the password has been modified, it generates a salt and hashes the password using bcrypt before saving it to the database.

Finally, we created and exported the User model.
We will use this model to interact with the "User" collection in the MongoDB database.

To make all our models available across our application, create a file inside the models folder, name it index.ts and add the following code:

import { User } from "./userModel";
export { User };

Here in this code, we are importing the User model and then re-exporting it from the current module. This means that any other module that imports from this module will have access to the User model as if it were defined in the current module.

Implementing the Middlewares:

Middlewares are functions or pieces of code that sit in between the HTTP request and the final response, allowing us to perform various tasks and operations on the request and response objects.
We will be using it to authenticate, authorize, login, validate input and handle errors in our API.

We will be adding the auth middleware. Inside your middleware folder, create a file, name it authMiddleware.ts and add the following code:

Here in this code,we have two middleware functions, protect and admin, used to protect our routes and control access in our API

We use the protect middlewareto protect routes from unauthorized users. It's used for authentication and authorization purposes.

It checks for the presence of a JSON Web Token (JWT) in the request's "Authorization" header. If a valid token is found, it decodes the token to retrieve user information.

The user's information is then attached to the req object for future use. The properties attached to req.user include _id, name, email, and isAdmin.
If the user is not found in the database, we return a 401 Unauthorized response and throws an error.

If the token is invalid, we also return a 401 Unauthorized response and throws an error.
If no token is found, we return a 401 Unauthorized response and throws an error.

We use the admin middleware to protect routes from users who are not flagged as administrators (admins).

Firstly,we check if the user object is present on the req object, which is typically attached by the protect middleware, and whether the isAdmin property is set to true.

If these conditions are met, it allows the request to continue processing by calling next().
If the conditions are not met, we return a 401 Unauthorized response and throws an error, indicating that the user is not authorized as an admin.

Now, let's add the errorMiddleware. Inside the middleware folder,create a file, name it errorMiddleware.ts and add the following code:

In this code, we have two middleware functions, notFound and errorHandler to handle HTTP errors and error responses.

We use the notFound middleware to handle situations where a requested route or resource is not found (HTTP 404 - Not Found).

It takes three parameters: req (the request object), res (the response object), and next (the next function in the middleware chain).

If a route is reached, and there is no matching route or resource for the requested URL (req.originalUrl), it generates a new error with a message indicating that the requested resource was not found.
It sets the HTTP response status to 404 (Not Found) using res.status(404).
Finally, it calls next(error) to pass the error to the next middleware in the chain.

We use the errorHandler middleware is to handle and format error responses.
It takes four parameters: err (the error object), req (the request object), res (the response object), and next (the next function in the middleware chain).

It first determines the HTTP status code to use for the response. If the response status code is 200 (OK), it sets the status code to 500 (Internal Server Error); otherwise, it uses the existing status code.

It sets the HTTP response status to the determined status code using res.status(statusCode).

It sends a JSON response containing an error message (err.message) and, in development mode (when process.env.NODE_ENV is not "production"), the full error stack (err.stack).

In production mode, the stack trace is omitted from the response for security reasons.

Adding Utility functions:

Utility function are used to encapsulate common tasks or functionalities in a reusable and modular manner.
Inside the utils folder, create a file, name it generateToken.ts and add the following code:

Here in this code, we have a utility file that contains a function for generating JSON Web Tokens (JWTs) for user authentication and authorization.

We defined a function called generateToken.
This function is responsible for generating a JWT for a user.
It takes a user's ID as a parameter.
The ID is used as a payload in the JWT to uniquely identify the user.

If the JWT_SECRET environment variable is defined (indicating the presence of a secret key for JWT generation), the function proceeds to create a JWT.

It uses the jwt.sign method provided by the jsonwebtoken library to create a token.
The token payload includes the user's ID.

The process.env.JWT_SECRET is used as the secret key for signing the token.

The token is set to expire after 30 days (the expiresIn: "30d" option). The function returns the generated JWT

Implementing the User Controller:

Now let's implement the user controller. Inside the controller folder, create a file. name it userController.ts and add the following code:

In this code, we have two route handler functions in a user controller.
These functions handle user-related operations, such as authentication and registration, in our API.

The authUser function is responsible for user authentication.
It handles a POST request to the /api/users/login route.

We firstly extract the email and password from the request body, submitted by a user attempting to log in.

We then querie the database to find a user with the specified email using User.findOne({ email }).

If a user is found, we proceed to check if the provided password matches the stored password using the matchPassword method.

If the email and password match, it responds with a JSON object containing the user's information (e.g., user ID, name, email, and whether they are an admin) and a JSON Web Token (JWT) generated by the generateToken function.

We will use this token to authenticate and authorize the user in subsequent requests.

If the email and password do not match, we set the response status to 401 (Unauthorized) and throws an error, indicating that the login attempt is invalid.

The registerUser function handles user registration.
It handles a POST request to the /api/users route, in our route.

The function first extracts the name, email, and password from the request body, submitted by a user during registration.

We first checks if a user with the provided email already exists by querying the database with User.findOne({ email }).

If a user with the same email is found, we set the response status to 400 (Bad Request) and throws an error indicating that the user already exists.

If the user does not already exist, we create a new user by calling User.create with the provided user data.

If the user creation is successful, we respond with a status of 201 (Created) and a JSON object containing the user's information and a JWT generated by the generateToken function.

If user creation fails for any reason, we set the response status to 400 and throw an error indicating invalid user data.

We then exported these functions to be used in our routes.

Adding the UserRoutes:

Inside the routes folder, create a file. Name it userRoutes.ts and add the following code:

Here in this code, we are setting up the routes related for user authentication and registration in our API.

We imported the necessary modules, including express for creating a router, route handler functions from the userController, and middleware functions from the authMiddleware module.

We created an instance of an Express router using express.Router() and assigned it to the router variable.

We define several routes using the .route method on the router.
/ route: It's used for both registration and getting a list of all users. A POST request to this route invokes the registerUser function, which handles user registration.

A GET request to this route invokes two middleware functions, protect and admin, followed by an operation that gets a list of all users.

We combined this to protect the route and ensure that only authenticated users with admin privileges can access it.

/login route: This route handles user authentication.
A POST request to this route invokes the authUser function, which handles user authentication.

The Middleware functions (protect and admin) are used in the route definitions to add an extra layer of logic before reaching the route handler. They perform tasks like user authentication and authorization.

Lastly, we exported the router from this module, making it available for use in other parts of our application.

Now, let's use our routes in the server.ts file

Update the code in the server.ts file by importing and adding the routes.
The updated server.ts file should now look like this:

Test your endpoints.

Adding the product Types:

In your types folder, create a file. Name it product.ts and add the following code:

Here In this code, we are defining the data models and interfaces for products and product reviews in our API.

We are simply defining TypeScript interfaces for products and product reviews, which we are using to specify the shape of data objects in our database.

The Product interface represents a product and defines the following properties:
name: The name of the product.
image: A URL or path to the product's image.
description: A description of the product.
brand: The brand or manufacturer of the product.
category: The category to which the product belongs.
price: The price of the product.
countInStock: The number of items available in stock.
rating: The rating of the product.
numReviews: The number of reviews for the product.

The Review interface represents a product review and includes the following properties:
user: The ID or username of the user who wrote the review.
name: The name of the reviewer.
rating: The rating given in the review.
comment: The text comment or review content.

We defined a ProductInDatabase Interface. This interface extends the Product interface and adds two additional properties:
user: The ID or username of the user associated with the product.
reviews: An array of product reviews. Each review conforms to the Review interface.

We defined and exported ProductDocument and ProductModelInterfaces
These interfaces are related to MongoDB and we are using them to define the structure of product documents in the database.

The ProductDocument extends the ProductInDatabase interface and Document.
It represents a document in the database collection and includes all the properties defined in the ProductInDatabase interface.

This interface also inherits functionality from Document for interacting with our database.

The ProductModel extends Model. It represents the model for interacting with the MongoDB collection. It is responsible for creating, querying, and modifying documents in the database collection.

In the index.ts file in your types folder, add this to it to export the product types.
export * from "./product";

Implementing the Product model:

Inside your models folder, create a file. Name it productModel.ts and add the following code:

In this code, we define Mongoose schemas and a model for our product.
This represents a product in our database.
We are using it to define the structure and behavior of the "Product" document in our database.

Firstly, we imported the necessary modules from Mongoose, including model and Schema.
We also imported the ProductDocument interface we defined earlier.

We defined a reviewSchema. This schema describes the structure of a product review with the following fields:
** user:** A reference to the user who wrote the review. It's a MongoDB ObjectId and is required. The ref option specifies that it references the "User" model.

name: The name of the reviewer, a required string.
** rating*: The rating given by the reviewer, a required number.
**comment:* The review comment, a required string.

The timestamps option is set to true, which automatically generates createdAt and updatedAt fields for each review.

We define a productSchema. It represents the structure of our product. It has the following fields:

user: A reference to the user who added the product
** name:** The name of the product, a required string.
image: The URL of the product's image, a required string.

brand: The brand of the product, a required string.
category: The category of the product, a required string.
description: A description of the product, a required string.
reviews: An array of review documents. Each product can have multiple reviews, and we use the reviewSchema to define their structure.
rating: The overall rating of the product, a number with a default value of 0.
numReviews: The number of reviews for the product, a number with a default value of 0.
price: The price of the product, a number with a default value of 0.
countInStock: The available quantity of the product, a number with a default value of 0.
We also have the timestamps set to true.

Lastly, We created and eported a model named "Product". The model is associated with the productSchema, and it's of type ProductDocument.
This model represents the product collection in our database and provides methods for interacting with our data.

Inside the index.ts file in the models folder,update it with this code.
import { User } from "./userModel"; import { Product } from "./productModel"; export { User, Product };

Adding the Product Controller:

In the controller folder, create a file. Name it productController.ts and add the following code to it.

In this code, we have a function that fetches a list of products from our database.

Firstly, we imported the asyncHandler middleware from the express-async-handler package. We will use this middleware to handle asynchronous operations within our route handler.

We imported the Product model from the models directory.
We also imported the Response and Request types from the typesdirectory to ensure type safety in our route handler.

We defined a route handler function named getProducts to handle HTTP GET requests to the /api/products endpoint.
It takes req(request) and res (response) objects as parameters, representing the incoming request and the response to be sent.

We set up pagination for the product list. We define a pageSize of 10 products per page and retrieve the page number from the query parameter pageNumber. If pageNumber is not provided, it defaults to 1.
Pagination allows clients to request specific pages of product results.

We allow clients to search for products by specifying a search keyword in the query parameter keyword.

If a keyword is provided, we create a keyword object to search for products with a partial case-insensitive match in the "name" field using regular expressions.
If no keyword is provided, the keyword object is an empty object, meaning all products will be returned.

To count our products in the database, We use Mongoose's countDocumentsmethod to count the total number of products that match the search criteria (including pagination).
We are using this count to determine the total number of pages.

To fetch all products from the database, we use the Mongoose's find method to retrieve the products.
We apply the search criteria defined by the keyword object.

We limit the number of products to pageSize and skip the appropriate number of products based on the current page.
The result is a list of products for the current page.

In response, we send a JSON response to the client, including
the list of products (products), current page number (page), total number of pages, calculated by dividing the total product count by the page size (pages).

We exported the getProducts route handler function so that it can be used in our application.

Adding Product Routes:

Inside your route folder, create a file. Name it productRoutes.ts and add the following code:

Here in this code, we're setting up a route for handling requests to get all products from our database.

We imported the Express framework.
We also imported the getProducts function from the productController module. This function is responsible for fetching and sending a list of products in response to client requests.

const router = express.Router();: We create a new router instance using Express.
router.route("/").get(getProducts);: Here, we define a route for the root URL ("/").
When a GET request is made to the root URL, it will trigger the getProducts function from the productController. This function retrieves and sends a list of products as a response.

Finally, we export the router instance so that it can be used in other parts of our application.

Now let's make use of our product route in the server.ts file.
In this file, import the productRoutes and use it like this:
import productRoutes from "./routes/productRoutes"; // Use routes app.use("/api/products/", productRoutes);

Your server.ts file should now look like this:

Implementing orderTypes:

Here we will be adding the types for the order. Inside your types folder, create a file. Name it order.tsand add the following code:

Here in this code, we imported the Model and Document types from the Mongoose library.

We are using these types work with MongoDB models and documents.
We also imported the ProductDocument type. It represents the document structure of our product in the database.
We defined some interfaces which represents different aspects of an order.

OrderItems: It describes the items within an order, including the name, quantity, image, price, and a reference to the associated product.

ShippingAddress: It represents the shipping address for a user, including fields for the address, city, postal code, and country.

PaymentResult: It defines the result of a payment transaction, including an ID, status, update time, and email address.

Order: It represents the overall order, combining information about the user who placed the order, the order items, shipping address, payment method, payment result, pricing details (items price, tax price, shipping price, total price), and flags to indicate whether the order is paid and delivered, along with timestamps.

export interface OrderDocument extends Order, Document {}: Here, we defined and interface called OrderDocument. We are using this interface to extend the Order interface and theDocument type from Mongoose and we also exported it.

export interface OrderModel extends Model<OrderDocument> {}: Here, we also define an interface OrderModel. This interface extends the Model type from Mongoose and is used to represent a model that interacts with the MongoDB database.

Implementing order model:

In the models folder, create a file. Name it orderModel.ts and add the following code to it:

Here in this code, we are defined the schema for an Order document in the database.
It represents an order made by a user in an our application.

Firstly, we imported the necessary modules:
We imported the model and Schema classes from the mongoose library.

We also imported the OrderDocument type.
We then defined the an order schema called orderSchema using the Schema class.
The schema specifies the structure of the Order document.
The key fields we added to the schema are as follows:

user: It's a reference to the user who placed the order. It's of type ObjectId and is required. The ref property indicates that it references the "User" model.

orderItems: An array of objects, each representing an item in the order. Each item has fields like name, quantity (qty), image, price, and references the "Product" model for the product. These items are required.

shippingAddress: An object containing address details, including address, city, postal code, and country. All these fields are required.

paymentMethod: The payment method used for the order, which is a string and is required.

paymentResult: An object containing payment-related information, including an ID, status, update time, and email address. These fields are all optional.

itemsPrice, taxPrice, shippingPrice, and totalPrice: These fields represent the pricing details of the order and are all numbers with default values.

isPaid and isDelivered: These are Boolean fields representing whether the order has been paid and delivered, respectively. They are required with default values.

**paidAt and deliveredAt: **These fields store timestamps indicating when the order was paid and delivered, respectively. They are of type Date.

Implementing orderController:

Inside the controller create a folder. name it orderController.ts and add the following code:

Here in this code, we're implementing several functionalities related for managing our orders:

We imported asyncHandler from the "express-async-handler" package, which helps handle errors within asynchronous Express routes.

We imported the Order model from the "../models/" directory, allowing interaction with the "Order" collection in the database.

We imported the Request and Response types from the "../types/express" file.
We added the following route handlers:

addOrderItems:
This handles the creation of a new order by extracting the order items, shipping address, payment method, etc from the request body.

It creates a new instance of the Order model with the extracted data and saves it to the database.
If successful, it returns the created order.

getOrderById:
This retrieves a specific order by its ID from the database. If found, it returns the order details.

updateOrderToPaid:
This updates an order's status to "paid" by modifying the isPaid field to true, setting the paidAt timestamp, and storing payment-related information. It then saves the updated order to the database.

updateOrderToDelivered: Similar to the previous function, this updates an order's status to "delivered" by modifying the isDelivered field to true and setting the deliveredAt timestamp. It then saves the updated order to the database.

getMyOrders:
This retrieves all orders associated with the currently logged-in user by searching orders based on the user's ID.

getOrders:
This retrieves all orders from the database, populated with user information (ID and name).

To be continue...adding the rest part of the article shortly.

Building SendCrypto: A Web 3.0 Application for Secure Blockchain Transactions

James Oyanna — Tue, 15 Aug 2023 14:06:16 +0000

Introduction:

The rapid evolution of blockchain technology has paved the way for Web 3.0 and decentralized finance, a new era that is redefining the way we transact, invest, and interact with our money.

This article delves into building SendCrypto, a Web 3.0 application that enables users to perform transactions through the blockchain.

What you will be building:

You will be creating a fully-fledged Web 3.0 application that allows users to send transactions through the blockchain.

Technologies you will be using for this project include React for the front-end, Hardhat-Ethers for Ethereum integration, and Solidity for the smart contract.

Application Demo:

View the application Demo Here

If you do not have a Meta mask setup on your browser, You can do that using this link - https://support.metamask.io/hc/en-us/articles/360015489531-Getting-started-with-MetaMask

Here is the link to the github repository

How it works:

The application allows users to make a transaction through the blockchain.

-Each transaction is paired with an image and it is stored on the blockchain.

When a user clicks on the connect to wallet button, it will immediately trigger a connection to the Metamask wallet, and it will request the account you want to connect to.

Connection to a meta mask account - You will automatically see a display of the connected wallet address on the Ethereum card.

You can switch your account to another account you want to send Ethereum to from the Metamask wallet.

Input your wallet address on the transaction area. Specify the amount of Ethereum you want to send, add a keyword you would want to use and a message then click on the Send Now button

Metamask automatically prompts a message describing the amount to be sent.

-Click on confirm then a second notification will appear which is the contract interaction.

Here, we are actually interacting with our Solidity smart contract doing this.

If you scroll down, you will see the recent transactions being stored on the blockchain. Clicking on any transaction will take you to the Etherscan platform, where you will see the actual address and the real transaction.

The focus of this tutorial will be to implement Web 3.0 into our React application, allowing it to send transactions through the blockchain and then store those transactions.

We will be conducting our testing on the goerli faucet test network.

Lets setup our development environment.

Setting up the Development Environment:

Now let's configure our development environment. We will start by setting up the frontend of the application using React.

Before we begin, ensure you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from the official Node.js website: https://nodejs.org/

To verify if Node.js and npm are installed, open your terminal and run the following commands:
node -v npm -v

Create a New Project:

create the main project folder, name it Sendcrypto.

We will be using vite to bootstrap our application. Vite is a build tool and development server for modern web development. It helps you set up a modern development environment with minimal configuration.

To install Vite globally, run the following command:

npm create vite@latest
Then follow the instructions to install it.
navigate into your project folder and run this command:

npm install npm run dev
Ensure you you name the react application as client during installation.

Your application should be running on http://127.0.0.1:5173/ . Enter this address on your browser. If the installation is successful, you should see this on your browser:

Installing tailwind CSS

use these commands
`npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p`

Open your project with VScode editor

copy the code below and paste on your tailwind.config file that was created when you ran the above command.

module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [],}
Add these code (directives) below to your index.css file
@tailwind base;
@tailwind components;
@tailwind utilities;

You can now test your App by adding the code below in your app.js file

to ensure your tailwind style is working.

Now let's create the basic setup for our smart contract. Navigate into the smart_contract directory. and run the command:
npm init -y

This will initialize an empty package.json. This would be the starting point of our smart contract.

Now let's create our react application that will display our transactions on the frontend.

Navigate to your client folder of your react application. Add a folder in the src directory. Name it components.

We can start adding our components. Inside the components folder, add the following files Navbar.jsx Footer.jsx, Services.jsx, Loader.jsx Transactions.jsx Welcome.jsx

To allow us to export all these components from a single file, add a file in the components folder. Name it index.js

Export all the components you have created in the index.js file. It should now look like this.

Add the following basic contents to the components you have created.

Now update your App.jsx by importing these components into them.
Your App.jsx should now look like this.

If everything works fine you should now see this on your browser.

Adding style to our App:
To add style to our application simply copy the style below and add it to your index.css file.

For the icons we will use throughout the project, install the react icons using this command:
npm i react-icons

For the logo, create a folder inside the src folder and add add a logo image of your choice to it.

Now let's add the code for the Navbar component:
Open the Navbar.jsx file and add the following code:

Here in this code, we imported the required modules and resources. We imported React from the "react" package, icons like HiMenuAlt4 from the react-icons/hi package, and AiOutlineClose from the react-icons/ai package.

We then added a logo image by importing it from the "../images/logo.png" file

We also define a functional component NavBarItem. It takes two props, title and classprops.

Inside the component, it returns a list element with the title as its content and applies CSS classes for margin, cursor, and any additional classes provided via classprops.

Inside our Navbar component,we sets up a state variable toggleMenu and a state updater function setToggleMenu using the useState hook. The initial state of toggleMenu is false.

In our jsx we, render a responsive navigation bar component that includes a logo, navigation items, and a mobile menu toggle.

It adapts to both desktop and mobile screen sizes, providing easy navigation through a list of items and a mobile menu toggle.

Your Navbar should now look like this on the browser:

Now let's add the code for the Welcome component.

Open the Welcome.jsx file and add the code below:

Here in this Welcome component, we updated it by first we import of several icons from the "react-icons" library.

We define a constant companyCommonStyles.This contains a set of CSS classes.

We also define a functional component called Input. It takes props like placeholder, name, type, value, and handleChange, and renders an input element with various properties and styling.

Inside the Welcome component, we declared three functions - connectWallet and handleSubmit and an empty handleChangefunction. We will add the logic for these functions later

The return statement of the Welcome component starts by rendering a structure of HTML elements.
The content section includes headings, a description, and a "Connect Wallet" button.

We added a section that includes a grid of information boxes with text like "Reliability", "Security", "Ethereum", etc. These boxes represent features of the platform.

We also added a button to send crypto.

Your application should now look like this.

Adding the Service Component:

Now inside your client folder, open the Services.jsx file and the following code :

Here in this code, we imported several icons from the react-iconspackage.

We then define a functional component ServiceCard that takes several props: color, title, icon, and subtitle.

This component represents a card-like structure containing service details.
We use the color prop to determine the background color of the circular icon container.

The icon prop is a React element representing the icon for the service.
The title prop is the title of the service.
The subtitle prop is the description of the service.
The card structure is built using flexbox classes for layout and styling.

We also define another functional component Services.
This component wraps the content of the services section, providing a gradient background.

Inside the component, we added a nested div element with various styling classes applied to control layout and spacing.

Adding Footer Component:

Inside the Footer.jsx file we previously created, add the following code:

Here in this code above, we define a React functional component called Footer, which serves as a footer section for our application.

The footer contains various elements such as a logo, navigation links, contact information, and copyright text.

We also imported the image named logo.png from the ../images/ directory to be used for our logo.

Adding Helper functions:

We will be adding some helper functions and reusable code snippets that we will be using throughout the application.

Inside the src folder, create a folder and name it utils. create a file inside the utils folder, name it Transactions.json, and add the following code to it:

Here in this code, is a JSON object that describes an Ethereumsmart contract called "Transactions" written in Solidity.

It includes information about the contract's name, source file path, ABI (interface for external interaction), compiled bytecode, and deployed bytecode.

The ABI outlines the contract's functions and events, while the bytecode is the low-level code that runs on the Ethereum network.

This artifact is essential for deploying, interacting with, and understanding our contract programmatically.

Inside the utils folder, create another file. Name it constants.js and add the following code to it.

Here in this code above, we imported the ABI(interface for external interaction) of the smart contract from the Transactions.json file we created.
We declared a constant variable named contractAddress, which contains the Ethereum address where the smart contract has been deployed. This address is represented as a hexadecimal string.
export const contractABI = abi.abi;
In this line of code, we declared a constant variable named contractABI. It assigns the abi property of the imported abi object to contractABI.

This contractABI represents the ABI of the smart contract and will be used in various parts of the application to interact with the contract's functions and events.

What we have done in this whole code module is to provide a central location for storing the contract's address and ABI, so as to make it easy for us to access and use these details throughout the application.

Inside the utils file, add create another file. Name it shortenAddress.js and add the following code:

Here in this code above, we define a function called shortenAddress. It takes in an Ethereum address as input and returns a shortened version of that address.

Ethereum addresses are typically long hexadecimal strings, and this function is intended to make them more visually manageable.

So, when you call the shortenAddress function with a full Ethereum address as an argument, it will return a string that shows the first five characters, an ellipsis, and the last four characters of the address.

Let's also add dummy transaction data that would serve as default transactions on the blockchain.
Inside the utils folder create a file. Name it dummyData.js and add the following code to it:

Here in this code above, we exported an array of objects, each representing a transaction with certain details.

Each object in the array contains information about the sender's address, receiver's address, amount, timestamp, and a GIF URL.
This represent a series of transactions in our blockchain application.

Now next we will use the React Context API to manage and share the state and functions relating to Ethereum transactions across our components without the need to pass props explicitly through component nesting.

Inside the src folder, create a folder. name it context. Inside the context folder, create a file. Name it TransactionContext.jsx and add the following code:

Here in this code above, we define a React context provider called TransactionsProvider that manages interactions with our blockchain contract using the Ethereum blockchain and MetaMask.

Firstly, we imported necessary libraries and modules, including React, useEffect, useState for managing component state, and the ethers library for interacting with the Ethereum blockchain.

We also imported contractABI and contractAddress from the constant module we defined earlier.

We created a context named TransactionContext using React.createContext(). This context will provide the necessary data and functions related to transactions to its consumers.

We define a createEthereumContract function. This initializes the Ethereum contract using the contractAddress and contractABI. It uses the MetaMask provider to obtain a signer and interact with the contract.

We define several state variables:
formData: Tracks form data such as the recipient's address, amount, keyword, and message.

currentAccount: Stores the current Ethereum account's address.

isLoading: Indicates whether a transaction is currently being processed.
transactionCount: Stores the number of transactions.

transactions: Holds an array of structured transaction objects.

For our Data Fetching and Processing, we defined several functions:
getAllTransactions: Uses the contract instance to fetch all transactions from the blockchain, processes the data, and updates the transactions state.

checkIfWalletIsConnect: Checks if MetaMask is installed, gets the user's Ethereum accounts, and updates the currentAccountstate. It then calls getAllTransactions.

checkIfTransactionsExists: Initializes the transactionCount using the contract's method to get the count of transactions.

Wallet Connection and Transaction Submission:

connectWallet: This function requests user account access from MetaMask and updates the currentAccount`.

sendTransaction: Constructs and sends an Ethereum` transaction using MetaMask.

It also interacts with the smart contract to add the transaction to the blockchain. It updates the transactionCount after the transaction is successful.

We use the useEffect hook is used to automatically check for wallet connection and existing transactions when the transactionCount changes. This helps keep the UI in sync with the blockchain.

The TransactionsProvider component wraps its children in the TransactionContext.Provider. It exposes various state variables and functions related to transactions to its children.

Since we are using the ethers library, you will need to install it for our application to work properly.
Navigate to your client directory, open your command-line and run this command to install ethers:

npm i ethers
To start your server again by running the command: npm run dev

We will also wrap our application with a custom context provider. This will provide the context data and functions related to Ethereum transactions to all components rendered within it.

Update your main.jsx file with the following code:

Here in this code, we added the TransactionsProvider by importing it from the TransactionContext in the context folder.

The TransactionsProvider is a custom context provider that wraps our main App component. It provides the context data and functions for Ethereum transactions.

We want to add a custom hook to fetch GIFs images from the Giphy API.
Inside your src folder, create a new folder, name it hooks. Inside the hooks folder add a file. Name it useFetch.jsx and add the following code:

Here in this code, we define a custom React hook named useFetch that is used to fetch GIFs from the Giphy API based on a provided keyword.

It uses the useState and useEffect hooks to manage the state and handle the asynchronous fetching of GIFs.

Now we will be adding our transactionscomponent logic. Inside the Transactions.jsx file in the components folder, add the following code:

Here in this code, we define two components: TransactionsCard and Transactions. We use these components to display a list of transactions with associated information, including GIFs fetched based on keywords.

We imported the useContext from the "react" library. The TransactionContext is imported from "../context/TransactionContext".

We imported the useFetch custom hook from "../hooks/useFetch".

We also imported the dummyData and shortenAddress functions from their respective paths.

We define TransactionsCard functional component which takes various props (addressTo, addressFrom, timestamp, message, keyword, amount, url) to render a transaction card.

We use the useFetch hook to fetch GIFs based on the keyword prop.

We define the Transactions functional component which displays a list of transaction cards using the TransactionsCard component.

It uses the useContext hook to access the transactions array and currentAccount from the TransactionContext.

Depending on whether there is a currentAccount, it displays a message suggesting to connect an account or showing the "Latest Transactions" header.

The list of transactions is rendered using the map function, combining the dummyData (predefined transactions) and the dynamic transactions from context.

Now let's update our Welcome component to add the logic for connectWallet, handleSubmit and handleChange functions we had earlier defined.

Inside the Welcome.jsxfile in the components folder, update it with the following code:

Here in this code above we updated the handleSubmit function in our previous code by using destructuring to extract values from the formData object.

The formData object holds data the users inputed in the form.

The values we extracted are addressTo, amount, keyword, and message, which represent the recipient's address, transaction amount, GIF keyword, and message respectively.

We prevented the default behavior of the form submission event by using e.preventDefault();.

if (!addressTo || !amount || !keyword || !message) return;

This is a conditional statement that checks whether any of the extracted values (i.e., addressTo, amount, keyword, message) are falsy.

If any of these values are falsy (empty or not provided), the condition evaluates to true, and the code inside the if-block doesn't run. This effectively stops the function from continuing if any required field is missing.

If all the required fields (addressTo, amount, keyword, message) have valid values, the sendTransaction function is invoked.

This function initiates the process of sending a cryptocurrency transaction based on the user's input data.

We will also add the code for the Loader component. Inside the Loader.jsx file we have created earlier, add the following code:

Here in this code, we define an arrow function component named Loader. This is a simple circular loading animation.

When this component is rendered in our application, it will display a spinning circle with a red border at the bottom. It's often used to show that some asynchronous operation (like data fetching) is in progress.

Connecting application to the blockchain

Now let's connect our application to the blockchain. We will be writing a solidity contract that keeps track of all the transactions that went through the blockchain.

Let's add the dependencies for our smart contract.
Switch to your smart_contract folder and from your project in your command-line, run the following command:

npm i hardhat @nomiclabs/hardhat-waffle @nomiclabs/hardhat-ethers chai ethereum-waffle ethers

Hardhat is an Ethereum development environment. It enables us to easily deploy contracts, run tests, and debug Solidity code without dealing with live environments. You can read more on their documentation Hardhat Doc

After the dependencies have finished installing, run the command:
npx hardhat and follow the instructions. Press yes to accept the questions. New files and folders are added to your project directory. You can run an initial test by running the command
npx hardhat test

Also, ensure you install the solidity extension on your Vscode. This would make your writing of solidity code easier.

here is it.

Now, let's write our smart contract for our transactions.
Inside the contracts folder in your smart_contract directory, add a file called Transactions.sol. Inside it add the following code below:

Here in this code,

pragma solidity ^0.8.0;

we use the pragma directive that specifies the version of the Solidity compiler that should be used.

The caret (^) symbol means the code is compatible with compiler versions greater than or equal to 0.8.0.

contract Transactions { }
Then, we define a Solidity smart contract named Transactions

uint256 transactionCount;

Then we declare a state variable transactionCount of type uint256, which will be used to keep track of the number of transactions.

event Transfer(address from, address receiver, uint amount, string message, uint256 timestamp, string keyword);

Then we define an event named Transfer. Events are simply a way for contracts to communicate that something has happened.

This event is used to log transaction details, such as sender, receiver, amount, message, timestamp, and keyword.
struct TransferStruct { address sender; address receiver; uint amount; string message; uint256 timestamp; string keyword; }

Then we define a structure named TransferStruct which holds the components of a transaction. It includes the sender's and receiver's addresses, the transaction amount, a message, timestamp, and a keyword associated with the transaction

TransferStruct[] transactions;

We then declare a dynamic array named transactions that will store instances of TransferStruct, representing the recorded transactions.

function addToBlockchain(address payable receiver, uint amount, string memory message, string memory keyword) public {
    transactionCount += 1;
    transactions.push(TransferStruct(msg.sender, receiver, amount, message, block.timestamp, keyword));

    emit Transfer(msg.sender, receiver, amount, message, block.timestamp, keyword);
}

Then we added an addToBlockchain function. This would allow a user to add a new transaction to the blockchain.

What it simply does is it increments the transactionCount, creates a new instance of TransferStruct with the provided parameters, pushes it to the transactions array, and emits the Transfer event to log the transaction details.


function getAllTransactions() public view returns (TransferStruct[] memory) {
    return transactions;
}

Here, we define a function, getAllTransactions, which is a view function that returns the entire array of recorded transactions when called. It doesn't modify the contract's state.

function getTransactionCount() public view returns (uint256) { return transactionCount; }

And lastly, we define a function, getTransactionCount, which is also a view function that returns the current value of transactionCount.

From deploy - When we run the deploy code, we are going to get the address of our smart contract deployed on the blockchain network

For our contract to be deployed, we need to have Ethereum on our own wallet already because everything on the blockchain network requires what we know as gas.

To get a wallet account signup for the Metamask account and use it on your browser as an extension.

Metamask is an extension to accessing Ethereum-enabled distributed applications or Dapps in your browser. You can install it here - https://metamask.io/download/

To deploy our smart contract, we will be using Alchemy. Its a platform that would enable us deploy our smart contract. You can signup for an account Here

To get a free Ethereum to test our contract, you can get from the ropsen test network or from goerli faucet - https://goerlifaucet.com/

When you have created Alchemy account, it should take you to the dashboard like this:

Click on Apps Menus on the Dashboard and click on the create App button to create an App. See below:

Writing code to deploy your application.

Developing A Task Management ChatGPT Plugin with Typescript

James Oyanna — Thu, 10 Aug 2023 13:53:08 +0000

Task management is an essential aspect of productivity and organization in both personal and professional settings.

With the rise of virtual assistants and chatbots, integrating task management capabilities into these platforms has become increasingly popular.

In this tutorial, we will build a ChatGPT plugin using Next.js, leveraging its new functionality and routes. The goal of our plugin is to provide task management capabilities, allowing users to list, create, and delete tasks.

Additionally, we will enable querying information about tasks, such as the number of remaining tasks. By the end of this tutorial, you will have a solid understanding of how to develop your own custom plugins.

To keep things simple, we will store our task data in memory using a store-like structure. However, in a production application, you would typically use a database for persistent storage. Now, let's dive into the development process.

To start with, we will scaffold our application by running : npx create-next-app chat-gpt-plugin
Following the prompt and select the appropriate instruction guide like this. choose

Would you like to use TypeScript with this project? ...Yes
Would you like to use ESLint with this project? » Yes
Would you like to use Tailwind CSS with this project? » No
Would you like to use src/ directory with this project? » Yes
Use App Router (recommended)? » Yes
Would you like to customize the default import alias? » Yes
What import alias would you like configured? ... @/* - press enter

Following these steps would create our nextjs application.

Now, to start our application, navigate into the newly created chat-gpt-plugin folder and run :
npm run dev

Your application should now be running on http://localhost:3000/. Go to your browser and visit this address.

If everything works fine, you should see this Nextjs page in your browser:

Now, let's open the ChatGPT documentation on the OpenAI website and explore the relevant section for our plugin. This documentation will serve as our reference throughout the development process.

Once you have reviewed the documentation, let's return to our application. We need to set up some configurations, starting with the headers to enable Cross-Origin Resource Sharing (CORS) for the ChatGPT API at Open API Doc

Inside our nextconfig file, in your project folder, add the following code:

Here in this code, we provided a configuration for our application.

The headers function here is an asynchronous function that we set up as custom headers for specific routes.

We set the Access-Control-Allow-Origin header to allow requests from https://chat.openai.com for all routes matching the /:path* pattern.

This is necessary in order to register our plugin.

Now, inside the public folder create a folder called .well-know. Create a file inside the .well-know directory called ai-plugin.json

The ai-plugin.json is a manifest that provides information about your plugin, such as its name, version, and main configuration endpoint, which can be used by the ChatGPT system to interact with your plugin effectively.

Add the following code to the ai-plugin.json file:

Here in this code we simply provide a JSON object that represents the schema of our Chatgpt plugin.

This JSON object follows the schema defined for chatgpt plugins and provides essential information about the plugin, including its name, description, authentication requirements, API details, logo, contact email, and legal information.

Now let's create the main configuration for our app.

In the public directory, create a file. Name it openapi.yml and add the following code to it :

Here in this code, we added a specification for defining and documenting the APIs
openapi: 3.0.1: Here we specify that the API is using the OpenAPI version 3.0.1.

We then provided information about the API, including its title, description, and version

servers: We define the server where the API is hosted. In this case, the server is specified as http://localhost:3000

paths: This is the heart of the API specification. It defines the various paths (URL endpoints) that the API exposes, along with the HTTP methods (such as GET, POST, etc.) that can be used on those paths.

/api/tasks: This is a path for getting the list of tasks. It uses the HTTP GET method.
The responses section specifies the possible responses from the API, including the HTTP status code and a description.
/api/create-task: This path is for adding a new task. It uses the HTTP POST method. The request body section specifies that the request must include a JSON body with a task property.

/api/delete-task: This path is for deleting a task. It also uses the HTTP POST method.

schemas:This subsection defines the data structures used in the API.

deleteTaskRequest: This schema defines the structure of the request body required for deleting a task. It contains a single property task of type string.

addTaskRequest: This schema defines the structure of the request body required for adding a new task. It also contains a single property task of type string.

getTasksResponse: This schema defines the structure of the response body when getting the list of tasks. It includes a property tasks which is an array of strings.

Building Scalable Fintech Applications: A Practical Guide for African Entrepreneurs

James Oyanna — Mon, 19 Jun 2023 17:18:44 +0000

Africa and Nigeria in particular are clearly in the midst of one of the most exciting phases of innovation and disruption in the financial sector.

Today, Fintech is emerging as a tech enabler in Nigeria,improving financial inclusion and serving as a catalyst for innovation in other sectors, such as agriculture and healthcare.

The increasing need for mobile money transfers and the underserving of small and medium enterprises in rural communities has created an opening that fintech startups have been quick to take advantage of.

No doubt, fintech startups are challenging traditional banking structures and are creating efficiency gains by opening up the financial services value chain.

This rise of fintech startups has put the demand for custom fintech applications on the rise as well. However, building a financial technology app is some real work.

I have had entrepreneurs who have discussed with me developing on fintech applications but are yet to do the groundwork in the early development phase.

Below, I have highlighted these points that can serve as a practical guide to building a scalable fintech application.

Choose a specific area:

When you have come up with an idea for your proposed fintech solution, you need to find a particular area or niche you want to develop the application for. A niche constitutes a set of areas a fintech startup could focus on for example;

Specific Demographics: You could target specific portions of the populace, like young adults or pensioners. Specific Industry: You could also target specific industries, such as offering loans, insurance, and payments.

Get your legal framework right:

There are several regulations put in place by the central bank for the operation of a financial service application. These regulations are very important because financial services are highly regulated.

Knowing the standards and regulations put in place by the Apex bank is crucial to developing a successful fintech product. Discovering new laws and rules while you’re already deep into the development process might cause major changes in the app’s features.

Know the exact problem you are solving:

You need to ask these questions. What problem are you addressing with the app?. What unique solution the application is providing for users? And what features should it include? You need to have a clear vision of the final result you are trying to build.

When you have made good market research, your team will come up with a final idea of a business case that will be competitive and user-oriented.

Choose the right technology:

To choose the right technology for your fintech application, you need to clearly define the features and functionalities that you will be integrated. The technology you choose should allow you to add new features quickly and make changes when necessary, without affecting the functionality of the entire application.

Your selected technology plays a major role in deciding the future of your application and choosing the wrong tech stack can cause you the loss of money, time, and resources for your project.

Firstly, you need to choose the right architecture. An application architecture determines how all the components will organize and communicate with each other.

After choosing the best architecture for your fintech app, you need to select a programming language. There are many programming languages to develop an application. The language of choice often dictates the cost and time needed for development.

For the mobile version of your application, you can choose between native app development (building separate apps for Android and IOS), or cross-platform development (writing a single codebase for both).

To minimize the time of your application development, you can consider using cross-platform technologies such as React Native or flutter. (Watch out for my next article on choosing the best technology for your fintech app).

Keep it simple, make it user-friendly:

Fintech applications are meant to be user-friendly. That’s the reason they are designed for. Customers know nothing about the coding, what they praise is simplicity, transparency, and a nice user interface.

Good UI/UX is the second most important thing talking about Fintech applications after security. Keep it simple by ensuring everything your user might need is available on the dashboard without tons of unnecessary features.

Develop an MVP:

A minimum viable product aims at testing the application before launching it. It’s simply a basic version of the app that includes its fundamental components and features.

That’s enough for the users to try it, and also a chance to attract new investors. Getting feedback from real users will show you if there are any weaknesses and also you’ll easily find out what features should be added next. #fintech #softwaredevelopment #Application

Building a Full-stack Invoicing Application using the Novu API

James Oyanna — Mon, 12 Jun 2023 22:23:03 +0000

Invoicing is an essential aspect of running a business, and having an efficient invoicing system can greatly streamline operations.

With the advancements in technology, developers now have access to powerful APIs that simplify the process of creating and sending invoices.

One such API is the Novu API, which empowers developers to build robust and feature-rich invoicing applications.

This article explores the power of the Novu API and how it can be leveraged to create a full-stack invoicing application.

You will be building a fullstack invoicing application for creating and Sending invoices to customers via email. This application will be useful for Startups, Business Owners and Freelancers.

Application Features

Invoice Creation:

The application provides a user-friendly interface for creating invoices.

Users can input relevant details such as the customer's name, billing information, item descriptions, quantities, prices, and notes.

Invoice Sending:

You will integrate the Novu API, that would enable you to send invoices in PDF format directly to customers via email.

Edit Invoice Functionality:

To cater to for changing requirements or corrections, you will incorporate an edit invoice functionality.

Here is the link to the repository of the application with the full code implementation -Repo

Here is a link to the demo of the application - Novu Invoice Application

Here is a screenshot of the final look of the application:

Frontend Page View :

Invoice Creation View:

Created Invoice View:

Sample Invoice:

Overview of the Novu API:

The Novu API is a unified delivery API that would allow you to send invoices as email messages to customers seamlessly.

You can read more about it on the Novu Website. You can also read-up on the documentation Here

It provides a straightforward integration process, making it an excellent choice for developers looking to incorporate invoicing functionality into their applications.

The API handles the complexities of email delivery, ensuring that invoices reach customers' inboxes reliably.

*The technologies you will be using for the development of this application are; *

React JS -Library for building your user interface
Axios - Promise based HTTP client for the browser and node.js
React-router - Enables the implementation of dynamic routing in a web applications.
Tailwind CSS - A utility-first CSS framework for your styling.
Novu/node - Simple components and APIs for managing all communication channels in one place: Email, SMS, Direct, and Push
Express JS - flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
HTML-PDF - HTML to PDF converter that uses phantomjs
Mongoose - Provides a straight-forward, schema-based solution to model our application data.
Node.js- Cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

Let's start building.
Create a folder for your project. Name it novu-invoice or you can name it anything you like.

Now, you will start with building the API or backend of the application first.

Inside the novu-invoice folder you have just created, create another folder. Name it backend.

Open your command-line inside the backend folder and type:
npm init --y to initiate your API application.

A package.json file is automatically generated for you.

Your package.json file should look like this -
{ "name": "backend", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

Setting up the Server:

Now, install the necessary dependencies you will be needing for this project by running this command:
npm i npm i express mongoose cors html-pdf moment pdfkit uuid @novu/node dotenv nodemon.

This will install all the dependencies.

Inside your backend folder, create a file. Name it app.js and setup a simple express server in it by adding the code below:

Here, you imported the Express.js module, which is a web application framework for Node.js.

You created an instance of the Express application with the code - const app = express();

You add a middleware to our application. In this case, express.json(), used to parse incoming JSON data.

This allows you to easily handle JSON payloads in your application routes.

You then setup a simple route for the root URL ("/") such that when a GET request is made to the root URL, the callback function (req, res) => { ... } is executed.

And then lastly, you specify a port on which the server will listen for incoming requests.

In this case, it is set to port 5000. The app.listen() function starts the server and listens on the specified port.

Once the server is running, it logs a message to the console indicating that the app is running and on that port.

Update your package.json by adding this start script - "start": "nodemon app.js" in the script section. Your package.json file should now look like this.

To start your server, run the command - npm start

This would display this on your command line, indicating the server is working.

Establish Database Connection:

Now, implement a database connection to your application.

In your root directory, create a file. Name it db.js and add the following code inside:

Here in this code, you are establishing a connection to a MongoDB database using Mongoose, a popular MongoDB object modeling tool for Node.js.

Firstly, you imported the Mongoose module. You then define an asynchronous function called connectToDatabase.

You establish a connection to the MongoDB database using the mongoose.connect() method. The connection string is provided as the argument, which is stored in the MONGODB_URI environment variable.

If the database connection is successful, you log a success message to the console.

You exported the connectToDatabase function, allowing other parts of our application to import and use it.

In your app.js file, import the connectToDatabase function and invoke it. Add the following code to your app.js file like this:

const connectToDatabase = require("./db"); ....... connectToDatabase();

Your app.js file should now look like this:

Now create a file. Name it .env in your root directory and add the following code:
MONGODB_URI = mongodb://localhost:27017/novu-invoice

The .env file you created is to securely manage configuration variables or environment-specific settings for your application.

It allows you to separate sensitive or environment-specific configuration from your application code in this case, you have store MongoDB connection url on it.

Please ensure you setup a MongoDB Database either locally using using the MongoDB Compass(You can do that here or on the cloud using the MongoDB Atlas.

You have also installed Nodemon, a library that helps you to automatically restart our server. You can also run npm start if you have terminate the process before.

If everything works fine, you should see this in your console indicating the database is successfully connected.

Implement Database Model:

Now, implement your database model.
Create a folder in your project directory. Name it model. Inside this folder, create a file. Name it invoiceModel.js and add the following code:

Here in this code, you imported the necessary modules from the Mongoose library.

const invoiceSchema = new Schema({ // Schema properties and their types });

Here, you created a new Mongoose schema named invoiceSchema using the Schema object. The schema defines the structure and properties of the "Invoice" document stored in the MongoDB collection.

You then define the properties of the Invoice schema. Each property corresponds to a field in the "Invoice" document.

The properties can have various types such as Date, String, or Number. The items property is an array that contains objects with properties such as itemName, unitPrice, and quantity.

The createdAtproperty is a special field that automatically gets assigned the current date and time when a new document is created.

module.exports = model('Invoice', invoiceSchema);

Here, you exported the Mongoose model for the "Invoice" schema. The model function is used to create a model from the invoiceSchema.

The model is given a name 'Invoice', which corresponds to the MongoDB collection name. The exported model can then be used to perform database operations on the "Invoice" collection.

Implement Invoice Controller:

Create a folder and name it controller. Inside the controller folder, create a file. Name it invoiceController.js and add the following code:

Here, you require the Mongoose library and an invoice model from the model directory.

You define a function called createInvoice that handles the creation of an invoice.

It extracts the necessary data from the request body, generates a random 6-digit invoice number with the prefix "INV," and then creates a new invoice using the InvoiceModel.

The new invoice is then sent as a JSON response with a status code of 201 (created).

You then define another function to handle the editing of an invoice.
It extracts the invoice ID from the request parameters and the invoice data from the request body.

It then checks if the provided invoice ID is a valid MongoDB object ID. If not, it sends a 404 response with the message "No invoice with that id."

If the ID is valid, it updates the invoice using the InvoiceModel's findByIdAndUpdate method, passing the ID, the invoice data, and the option { new: true } to return the updated invoice. The updated invoice is then sent as a JSON response.

Implement Routing:

To implement your routes, create a folder. Name it routes. Inside it, create a file. Name it invoiceRoute.js and add the following code:

Here in this code, you imported the Express library and the other controller functions from controllers folder.

The controller functions handle the logic for creating and editing an invoice.

You created an instance of the Express router by calling express.Router(). The router allows you to define routes for specific HTTP methods and attach the corresponding controller functions to them.

You define the following routes using the router:

POST: /

This route is used to create a new invoice. It calls the createInvoice controller function.

PATCH /:id

This route is used to update an existing invoice based on the id parameter. It calls the editInvoice controller function.

Now make use of your routes in the app.js file.
In your app.js file import the invoice route by requiring it like this:

const invoiceRoutes = require('./routes/invoiceRoute')
And use it like this:
app.use('/api/invoices', invoiceRoutes);

Your app.js file should now look like this:

Designing the Invoice Template:

In this section you will be designing the way your invoice will look like.

Inside your project folder, create a folder. Name it document. Inside the document folder create a file. Name it index.js and add the following code:

Here in this code you are basically defining a JavaScript function called pdfTemplate that generates an HTML template for your invoice.

The pdfTemplate function takes an object as an argument containing various properties related to an invoice, such as name, phoneNumber, email, notes, items, dueDate, issuedDate, totalQuantity, totalAmount, and invoiceNumber.

It uses these properties to populate the invoice template.

The returned HTML template can then be used to generate PDF documents or display the invoice in an HTML format.

You will import the invoice template into our app.js file and use it later on.

Implementing the Novu API:

Novu provides a unified API that makes it simple to send notifications through multiple channels, including In-App, Push, Email, SMS, and Chat.

With Novu, you can create custom workflows and define conditions for each channel, ensuring that your notifications are delivered in the most effective way possible. You can read more about the Novu API in their Official Doc.

You will need to sign up for a Novu account to get started

After setting up an account, the next step involves creating a workflow within the workflow tab.

Here, you added the email event below the Trigger by dragging and dropping it as the event that will happen whenever a notification is triggered.

So you are setting up one that works for sending emails, as you want to send invoice as an email.

Click on the email channel you just added and fill-in the required information and click on the update button to save your changes like this :

Go to your settings tab still in your Novu Dashboard, copy the API Key and add it to your environment variable like this :

In your .env file, add the api key you have just copied like this:

NOVU_API_KEY= your-novu-api. Replace the value with your Novu API Key.

One more thing you will add to your implementation is the TRIGGER_NAME. You will get this by clicking on the Workflow tab and locate the settings area like this:

In this case, the TRIGGER_NAME which is our identifier isinvoice-notification. Copy your identifier and save it somewhere. You will need it for your implementation.

Now, implement the Novu API. But before that, require some of the dependencies you will be using. Add the following to your app.js file
const { Novu } = require('@novu/node'); const pdf = require('html-pdf'); const cors = require('cors'); const fs = require('fs'); const pdfTemplate = require('./document/index');

// Enable CORS middleware app.use(cors());

Here in this code above, you imported several Node.js modules: @novu/node, html-pdf, cors, fs, and a custom module pdfTemplate.

You also imported or require the pdfTemplate you have previously created.

Then you added the CORS middleware to the Express application using this code:

app.use(cors());

The application enables CORS and allows cross-origin requests from different domains.

Add the logic for sending the invoice as PDF like this:

Here in this code, you define an object options with a property format set to 'A4'. These options are used when generating the PDF document using the html-pdf library. In this case, the A4 format is specified.

app.post('/send-pdf', (req, res) => { ... });

You then sets up a route handler for the POST request to the /send-pdf endpoint.

You listen for incoming requests and executes the provided callback function when the endpoint is accessed via a POST request.

const { email } = req.body;
You extracted the email property from the request body using destructuring assignment.

pdf.create(pdfTemplate(req.body), options).toFile('invoice.pdf', (err) => { ... });
You generated a PDF document using the pdfTemplate function and the options defined earlier.

You executed the pdfTemplate function with the request body as an argument. The resulting PDF document is saved to a file named 'invoice.pdf'.

const novu = new Novu(process.env.NOVU_API_KEY);

With this code above, you created a new instance of the Novu object, which was imported earlier from the @novu/nodemodule.

novu.trigger('invoice-notification', { ... });

Here, you invoke the trigger method of the novu object, passing 'invoice-notification' as the first argument and an object containing notification details as the second argument. (Remember to replace the identifier with your own TRIGGER_NAME or identifier you had earlier saved.

The details include the recipient's subscriber ID (Remember to replace the subscriber ID with the one on your Novu dashboard) and email address, and an attachment object representing the invoice in PDF format.

It reads the contents of the PDF file using fs.readFileSync and converts it to a base64-encoded string before attaching it to the payload.

What you have basically done was to handle a POST request to generate a PDF invoice, save it to a file, and trigger a notification using the Novu object.

Your app.js should finally look like this:

You are done with the backend of our Novu Invoice project. You can test your endpoints using Postman like this:

Testing the create invoice endpoint:

Developing the frontend of your Invoice Application:

In this section, you will be developing the frontend of your invoice application.

Inside your project directory where you have your backend folder,
initialize a new react application by running:
npx create-react-app frontend on your command line.

This would create a new frontendfolder for your application.

Navigate into the frontend folder from your command line and install the Tailwindcss to add styling to your application using the following command:

npm install -D tailwindcss and then run
npx tailwindcss init to initialize the Tailwindcss. This will automatically generate a tailwind.config file for the setup.

Now open the application in VSCode or in any of your favorite editor.

Remove the default content in the tailwind.config and add the following code:

/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], }

Open the index.css file in the srcfolder of your project directory. Remove its content and add the following code:
@tailwind base; @tailwind components; @tailwind utilities;

Now start your application by running this command:
npm start

This will start the application on port 3000. Go to your browser. You should see your application running on http://localhost:3000/

You should see this:

Now do some cleaning on your application and also test your tailwind styling to ensure its working.

In the app.js file, remove it's content and add the following code:

export default function App() { return ( <h1 className="text-3xl font-bold underline bg-green-600"> Novu Invoice </h1> ) }

After applying the tailwind styling, your application should now look like this on your browser.

Now implement routing:
Firstly, you will need to install the react-router-dom library for your routing. Stop your server and run the command:

npm i react-router-dom

In the src folder, create a folder. Name it components. Inside the components folder, create a file and name it Invoice.jsx and add the following code.

Here you just create a simple component to render invoice as text.

Now, update the index.js file with the following code:

Here in this code, you imported the necessary modules from the react, react-dom, and react-router-dom libraries.

You also imported the Invoice component you had created earlier.

You created a router using createBrowserRouter from react-router-dom.

Router is configured with an array containing a single route object:

The route object specifies the path as "/" (root path) and associates it with the Invoice component meaning that when the root path is accessed, the Invoice component will be rendered.

Add Logo:

In the src folder, create a folder name it images and add any image of your choice as logo.

Creating the Invoice Header:

Now, create a file inside your component folder. Name it InvoiceHeader.jsx and add the following code:

Here in this code, you define a React functional component called InvoiceHeader.

You added your logo by importing it from the images folder.

You imported Link from "react-router-dom", a package used for routing in React applications. It will allow you create links to different routes within the application.

InvoiceHeader component renders a header section for your invoice which includes a logo, title, location information, and an invoice number label.

The logo is wrapped in a link that navigates to the root path when clicked.

Import the InvoiceHeader component into the Invoice component. Your Invoice component should now look like this:

Here in this code, you imported the InvoiceHeader from the './InvoiceHeader' file.

A container is rendered with a specified width and styling, and includes the InvoiceHeader component as its child, which renders the header section of the invoice.

Your application should now look like this on your browser:

Add Invoice FormField:

Now, create a file inside your component folder. Name it FormField.jsx and add the following code to it:

Here in this code, you define the FormField component as an arrow function that takes in a destructured object as its parameter.

This object contains the following properties;
label: Represents the label text for the form field.

name: Represents the name attribute of the input field.

type: Represents the type attribute of the input field (e.g., "text", "number", "email").

value: Represents the current value of the input field.

onChange: Represents the callback function to handle the onChange event of the input field.

placeholder: Represents the placeholder text for the input field.

error: Represents an optional error message to be displayed.

This FormField component represents a form field with a label, input field, and optional error message.

It provides props for configuring various attributes and behavior of the form field, such as label text, input type, value, onChange event handler, placeholder, and error message.

You will be defining these props in the Invoice component shortly.

Now use your FormFieldcomponent in the Invoice component. You will also be adding a table and a button. Update your Invoice.jsx file with this code:

Here in this code, you imported the FormField. You rendered a form layout inside a flex container with centered content and a margin-top.

You included the InvoiceHeader component to display the invoice header section.

The form includes fields for billing information, such as the recipient's name and the issued date. It also includes fields for contact information, such as email address, phone number, and due date.

You added a table to be used for inputting item descriptions, quantities, prices, and amounts. Add Item button is present to add new items to the invoice.

Invoice summary section displays the total quantity and total amount of the invoice.

You added "Create Invoice" button at the end of the form for creating the invoice.

Your application should now look like this on your browser:

Now, define the different states to be used in your application.

You will be adding the invoiceData, error and isLoading to track the state in your application and to also update the state.

Update your Invoice.jsx file with the following code:

Here in this code , you imported useState hook from the "react" module and useNavigate from "react-router-dom" module.

Then you initialized state variables using the useState hook:

isLoading:
A boolean state to track the loading state of the component.
errors:
An object that holds error messages for form fields.

invoiceData:
An object that stores the data related to the invoice, including name, phoneNumber, email, issuedDate, dueDate, items (an array of item details), notes, total, invoiceNumber, totalQuantity, and totalAmount.

You defined a navigate function using the useNavigate hook from "react-router-dom". It allows you to navigate to different routes in our application.

You added event handlers as follows:

handleInputChange:
Handles the input change for form fields and updates the invoiceData state accordingly.
handleItemChange:
Handles the input change for individual item fields in the items array and updates the invoiceData state. It also calls theupdateTotals function to recalculate the total quantity and total amount.
handleAddItem:
Adds a new item object to the invoiceData state's items array.

handleRemoveItem:
Removes an item object from the invoiceData state's items array.

updateTotals:
Calculates the total quantity and total amount based on the items' quantity and unit price. It updates the invoiceData state accordingly.

Now, you will refactor our code a bit. You will extract the invoice items into it's own component.

Create a file inside the component folder. Name it InvoiceItem.jsx and add the following code to it:

Here in this code, you defined the InvoiceItem functional component, which represents a single row in the invoice table for an item.

The component receives props as its parameter. The props include:

item: An object containing the details of the item (e.g., itemName, quantity, unitPrice).

index: The index of the item in the list of items.

onChange: A callback function to handle changes in the item's input fields.

onRemove: A callback function to handle removing the item from the list.

This component returns JSX markup, representing a table row (

) with several table cells ().

Each table cell contains an element for user input or display of item details.

You will use this component inside your Invoice component later.

Now before you start using our state variables and the functions, you defined in the Invoice component, integrate your backend API with the frontend.

Run the command npm i axios to install the axios library for making http calls to the server. If your React app is still running, you will need to stop the server before installing the library.

Inside the src, create a file. Name it api.jsand add the following code to it:-

Here in this code, you imported axios for making HTTP requests to our API.

Using the create method, you created an Axios instance. The method accepts an object with configuration options as its parameter.

In this case, the configuration object contains a single property, baseURL which Specifies the base URL for all the requests made using the Axios instance.

Now update your Invoice.jsx with the following code:

Here in this code, you defined several event handler functions used in the form:

navigateTo: Use this navigate function to navigate to a specified route with optional state data.

handleCreateInvoice: An asynchronous function that handles the creation of the invoice.

It performs validation on the form fields, sends a POST request to the server using the api object, handles the response, and redirects to the invoice details page.

handleInputChange: function updates the corresponding field value in the invoiceData state object when an input field's value changes.

handleItemChange: function to update the details of an individual invoice item in the invoiceData state object when the corresponding input field's value changes.

It also calls the updateTotals function to recalculate the total quantity and total amount.

handleAddItem: A function that adds a new empty item to the items array in the invoiceData state object.

handleRemoveItem: this function removes an item from the items array in the invoiceData state object.

updateTotals: function calculates the total quantity and total amount based on the items' quantities and unit prices and updates the corresponding fields in the invoiceData state object.

Upon clicking the Create Invoice button to create your invoice, you need to set a page that you will use to display the detail of the invoice you have created.

Now set it up. Inside your component folder, create a file. Name it InvoiceDetails.jsx and add the following code:

Here in this code, you imported several dependencies and defined the InvoiceDetails component that renders the invoice details form.

Inside the component, you used the useLocation hook to get the current location object from the React Router.

You initialized the initialInvoiceData variable with the invoiceData value from the location state. The ?. operator is used for optional chaining to prevent errors if location.state or location.state.invoiceDatais undefined.

You defined the navigateTo function to navigate to a specified route when called. It uses the navigate function from useNavigate.

You defined the handleGoBack function to navigate back to the home page when called. It calls the navigateTo function with the "/" route.

You defined the handleSendInvoice function as an asynchronous function. It is called when the "Send Invoice" button is clicked

It sends the invoice data to the server using the api.post method and updates the loading, error, and success states based on the response.

You also defined the handleEditInvoice function as an asynchronous function. It toggles the editMode state when called.

If editMode is true, it calculates the updated total quantity and total amount based on the items in the invoice data, sends a patch request to update the invoice data on the server using the api.patch method, and updates the success and error states accordingly.

Also ensure you update your index.js file by importing InvoiceDetails into it. You use it to handle routing to the details page.

Your index.js file should now look like this:

YOU have just completed your fullstack application. You can test its functionalities by creating and invoice, add your email and other information and send the invoice to your email.

A Message will display showing an Email has been sent to the email you supplied for the receiving of the Invoice.

Here is the link to the repository of the application with the full code implementation -Repo

Here is a link to the demo of the application - Novu Invoice Application

Conclusion: This tutorial provides a details explanation on how you can integrate the Novu API on an Invoice application for sending of invoice via email.

Preparing for Your First Software Engineering Job: Key Areas for Junior Developers to Focus On

James Oyanna — Wed, 31 May 2023 10:29:10 +0000

As you embark on your journey of learning and developing your technical expertise, it's important to focus on areas that will prepare you for your first software engineering job.

In this article, we will discuss the key areas you can prioritize to ensure you are well-prepared for the job market as a Backend, Frontend, or full-stack engineer.

By ticking these boxes in the last lap of your learning, you will equip yourself with the necessary skills to excel in the industry.

I have assumed you have an appreciable understanding of some technologies you work with.

I am also assuming you could be joining a standard company that follows the best practices in software development.

Your typical workday will involve coding and working on tasks.

Today, you could be debugging and fixing issues, next week you could be implementing new features, or optimizing an existing code.

Don't be surprised, you may spend a greater part of your time reading the company's codebase and not writing code in your first month or more.

This might slightly be different for some companies that may expect you to be coding from day one.

If it's a brownfield application (An application that is already existing) , In some cases, you may not be writing new code from scratch.

There are already existing components or modules you will be reusing for your work.

Here are some areas or boxes you should thick in your learning before you join your dream company.

Learn Coding Standard/Style Guide:

Familiarize yourself with coding standards and best practices established by your company.

You'll work with your team to follow the coding standards & best practices established by your company.

Your company will set coding conventions or style guides, guidelines, and rules that you and your team will follow when writing code.

You are not expected to break these rules. They are already set by software that checks for code quality.

These standards define a consistent and uniform way of formatting your code, naming variables and functions, organizing code structures,

The reason for the coding standards is to improve code readability, maintainability, and collaboration with your development team.

Adopting a widely-used style guide, such as the Airbnb style guide, can help you practice adhering to coding standards from the start.

For those in the Javascript & React ecosystem, You can try setting up using this article Airbnb style guide and it out in your next hobby project. Start getting used to it.

Participate in Code Review:

Engage in code reviews to gain experience and improve code quality. Platforms like Codacy can assist you by automatically reviewing your code and providing feedback. Embracing code reviews allows you to learn from experienced developers, enhance your coding skills, and maintain high-quality codebases.

Learn Intermediate Git Commands:

Expand your knowledge of Git beyond the basics. I know you are already used to or familiar with the basic git commands. That's fine. You need to step up with these commands:

Git stash:

You will need it often to temporarily save changes and not commit them yet so you can switch to another branch to quickly work on a new task assigned to you.

You can thereafter after comeback to your previous work using the git stash pop command.

Git Rebase:

You will need it so you can incorporate changes from one branch into another so you do not create a new merge commit.
why? because your code reviewer wants you to maintain a clean and linear commit history.

Git pull:

You will need to use it often to fetch the latest changes from the remote repository that your developer colleagues have worked on and automatically merges them into your local branch.

Practicing these commands in your next project will improve your proficiency in version control.

Embrace Continuous Learning and Problem-Solving:

Expect challenges in your software engineering career. Embrace them as learning opportunities and take responsibility for your mistakes. Instead of making excuses, offer options and seek solutions. Strive to continuously learn and stay updated with the latest technologies and industry trends. Engage in personal projects and allocate time for self-improvement.

Emphasize Collaboration and Communication:

Remember that you are not working alone. Collaborate with your team members, participate in meetings and discussions, and embrace the feedback provided during code reviews.

Develop effective communication skills to explain your code and ideas clearly. Actively seek guidance and clarification when needed, as this shows your willingness to learn and grow.

Allocate Time for Personal Development:

Invest time in exploring new technologies and expanding your skillset beyond what is used in your workplace. Upskill yourself in areas that may not be provided by your company. This will make you more versatile and future-proof your career.

Prioritize Testing in Your Learning:

Incorporate testing as an integral part of your learning process. Building confidence in your code and ensuring code quality through proper testing is crucial.

By incorporating testing early on, you can catch and prevent bugs before they impact the live application. Understand the importance of unit testing, integration testing, and end-to-end testing in different software development scenarios.

Improve Your Technical Communication:

Enhance your ability to communicate technical concepts effectively. Practice explaining your code and ideas to others, as this skill will be valuable when collaborating with team members and presenting your work.

Effective technical communication will foster better understanding and lead to more successful outcomes.

Developing and Publishing a Typescript-based SDK

James Oyanna — Mon, 08 May 2023 21:56:28 +0000

A Software Development Kit (SDK) is a set of development tools, libraries, documentation, and sample code that allows developers to create applications for a specific platform or system.

SDKs are used to make it easier and faster for developers to build applications that interact with a particular system, by providing pre-built components and APIs that abstract away the complexity of the system.

Say you want to interact with 3rd party APIs, if there was no SDK, you would have to write the HTTP client, manage authentication, do the error handling, and so on.

Having an SDK provides a better developer experience and it allows the developers to use your APIs in the right way.

TypeScript has gained popularity as a preferred language for building SDKs due to its strong typing and maintainability features.

In this article, we will discuss how to develop a simple SDK with TypeScript. This SDK will connect to the JSON Placeholder API for fetching posts, creating and retrieving a particular post from the API. We will then also publish it on the npm registry.

The full code implementation can be found on this repo

Setting up our development environment:

The first step is to set up the development environment. This involves installing Node.js and TypeScript on your computer, as well as any other dependencies that you might need.

Create a folder in your computer and name it typescript-sdk
Navigate into the folder and open your command line in it.

Create a new folder inside the typescript-sdk folder, call it sdk. Navigate into it from the command line by typing cd sdk.

Inside the sdk folder, initialize a new project using the command npm init -y.
A package.json file will automatically be created on it for you.

Now let install the dependencies we will be needing for this project using this commands:

npm install microbundle

npm install typescript@latest -g

npm install isomorphic-unfetch

Microbundle- Microbundle is a tool used for bundling JavaScript code into a single, self-contained file that can be used in web applications or other software projects.

It is particularly useful for developing libraries or modules that need to be distributed in a standalone format.

Now, lets add the necessary details to our package.json file.
Open the package.json file and update the following

Change "main": "index.js", to "main": "dist/index.js",.

In the script section, add this script:
"build": "rm -rf dist && microbundle --tsconfig tsconfig.json --no-sourcemap",

Now create a tsconfig.json file - You can either create it manually or by running this command:
tsc --init

Remove the default configuration in the tsconfig.json file and add the one below:




{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": false,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "test", "lib", "**/*spec.ts"]
}

In your project folder create a new folder and name it src. Create two files - index.ts and base.ts inside the src folder.

Inside the base.ts file add the following code:

Here in this code, we define a Base class which is to be used as a base class for other classes that need to make API requests.

The class has two private properties, apiKey and baseUrl, and a constructor that takes a configuration object containing an API key and an optional base URL.

This Base class also has a protected method called request that makes an HTTP request to the API. The method takes an endpoint path and an optional RequestInit object, which can be used to pass additional options to the fetch function.

Inside the request method, the base URL and API key are used to construct the full URL for the API endpoint.

A headers object is also created, which includes the API key and sets the content type to JSON.

The Object.assign method is then used to merge the options parameter with the headers object, creating a new config object that can be passed to the fetch function.

The fetch function is then called with the full URL and the config object, and the response is stored in the response variable.

If the response is OK (i.e. the status code is in the 200-299 range), the JSON response data is extracted using the response.json() method and returned as the requested type T.

If the response is not OK, an error is thrown with the response status text as the error message.

Now lets implement our post methods.

Inside your src folder, create another folder called posts and inside the posts folder you just created, add 2 files - index.ts and types.ts.
Open the types.ts file and add the following code:

Here in this code,we define two TypeScript types, Post and NewPost.
The Post type is an object with four properties: id, title, body, and userId. Each property has a specific type: id is a number, title and body are strings, and userId is also a number.

The NewPost type is defined using TypeScript's Omit utility type, which takes an existing type and creates a new type by omitting one or more specified properties.

In this case, we're using Omit to create a new type that's similar to Post, but with the id property omitted.
This is useful in situations where we need to create a new object that's similar to an existing object, but with some changes.

Now, in the index.ts inside the posts folder, add the following code:

Here in the code, we implemented the Posts API and we are using Typescript to define the types of the API responses and requests.

The Posts class extends the Base class and implements the methods of the Posts API.
We added a getPostById method that takes an ID and returns a single post with that ID.

We also added a getPosts method which returns an array of all posts.
Then we added createPost method that creates a new post by sending a POST request with the new post data as the request body.
The API responses and requests are defined using the Post and NewPost types respectively.

We define constant resourceName which is used as the resource name for the Posts API.

Each method sends a request to the API using the request() method inherited from the Base class, passing the appropriate URL and options.
The methods return promises that resolve to the response data, which is typed according to the method's return type definition.

Now lets add mixins- Mixins are a programming concept that allows classes to inherit properties and methods from multiple sources.

In other words, mixins enable the creation of a new class by combining functionality from multiple classes without having to use inheritance.

In your src folder, create a file called utils.ts and add the following code:

Here in this code we define a function called applyMixins which is used to apply properties and methods of multiple base classes to a single derived class.

The function takes two parameters, derivedCtor which represents the derived class and baseCtors which is an array of base classes.

Inside the function, we use the forEach method to iterate over each base class in the baseCtorsarray.

We then use the getOwnPropertyNames method to get all the property names of the prototype object of the base class.

Then, for each property, the defineProperty method is used to define a new property on the prototype object of the derived class.
This new property has the same name and property descriptor as the corresponding property on the base class.

Next, we will create a index.ts file in our src folder and the following code:

Here in this code, we define and exports the Typicode class as the default export of the module.
The Typicode class extends the Base class and implements the Posts class.

The Posts class provides methods to interact with the Posts API. The applyMixins function is used to add the methods and properties of the Posts class to the Typicode class.

This is done using the interface keyword to declare that Typicode implements Posts and then calling applyMixins with Typicode and an array containing Posts. This allows Typicode to inherit the functionality of the Posts class and extend the functionality of the Base class.

Now before we publish our sdk to npm registry, lets make some changes to our package.json file.
Here is how it should look like after the update.

Now run npm run build to build our sdk. This would generate a dist file.

Now, let's publish our sdk.
You will have to create an account on the NPM website if you haven't already done so.

Log in to your NPM account from the command line in your project directory by running npm login and providing your credentials.

You can test your package locally using the npm link command to create a symbolic link from your package to your local node_modules directory.

We won't be doing any local testing here since everything appears to be functioning correctly.

Run the command npm init --scope=oyanna
Ensure you replace the scope value i.e oyanna with your name or any name you like before running the command.

Use the npm publish --access-public command to publish your package to the NPM registry.
If your publishing works fine, you should see this on your npm account:

How to use the SDK:

To use this SDK,create a folder called sdk-test
Inside the folder, initialize a new project by running npm init -y in the directory or folder you have just created. This would generate a pakage.json file in it.

Create a tsconfig.json file inside the folder and add the following code:

Install the SDK package we have published by running the command:
npm install @oyanna/typescript-sdk

Create a new folder inside your project directory and add a new file called run.ts
Add the following code the the file:

Here, we imported the Typicode class from our SK.

We then created a new instance of the Typicode is with an object that contains an API key as the property. We assigned this instance to a variable called client.

To make use of the API to get post from the jsonplaceholder api, we called the getPosts method on the client object, which retrieves a list of posts from the Typicode API.

The result is a Promise which, when resolved, and logs the retrieved posts to the console.

To run the project and see the result in the console, add the following script to your package.json file.
"scripts": { "build": "tsc" },

Now lets also make use of our SDK to create a post
Run the following command:
npm run build . This command will build your SDK by creating a dist folder
Now run the command tsc
Then run the command: node run.js

You should see the following result log into command line:

The createPost method is called on the client object with a new post object that contains a title, body, and user ID.

When the Promise returned by createPost resolves, a message is logged to the console indicating the ID of the newly created post.

4 techniques for using TypeScript effectively to improve code quality

James Oyanna — Tue, 25 Apr 2023 06:58:31 +0000

TypeScript is a statically typed superset of JavaScript that offers many benefits such as type safety, better tooling support, and improved code readability.

TypeScript can make your codebase more maintainable and less prone to errors if used correctly.

In this article, we will discuss 4 advanced TypeScript techniques that can help you write cleaner, more maintainable code.

1. Use Advanced Types:

TypeScript provides many advanced types that can make your code more expressive and concise. Some examples include:

Union Types

Union types allow you to define a variable that can hold values of different types. For example, the following code defines a variable that can hold either a string or a number:

let address: string | number; address = "Lagos" address = 19;

Here we define a variable called address which can hold values of either type string or number.

We then assign a string value "Lagos" to the address variable. Since we have defined address as a string or number variable, this is perfectly valid.

Similarly, we assign a number value 19 to the address variable, which is also valid since address is defined to accept either a string or a number.

This is an example of using Union Types in TypeScript to define a variable that can hold multiple types.

Using Union Types can be helpful when you have a variable that can hold values of different types, and you want to enforce type safety by ensuring that only certain types of values are assigned to it.

Intersection Types:

Intersection types allow you to combine multiple types into a single type. For example, the following code defines a type that has properties from both Name and Age interfaces:

`interface Name {
name: string;
}

interface Age {
age: number;
}

type UserInfo = Name & Age;

const info: UserInfo = {
name: 'james',
age: 28,
};`

Here we define two interfaces named Name and Age, and a type named UserInfo.

The Name interface has a single property called name of type string and the Age interface also has a single property called age of type number.

We then define UserInfo type using the & (intersection) operator, which means it combines the properties of both Name and Age interfaces. This creates a new type that has all the properties of both interfaces.

The info constant is of type UserInfo, which means it has to have both the name and age properties. In this case, info is an object that has a name property with the value of 'james' and an age property with the value of 28.

Conditional Types

Conditional types allow you to define types that depend on other types. For example, the following code defines a type that returns a number if T is a number, and a string otherwise

`type NumberOrString = T extends number ? number : string;

const a: NumberOrString = 42; // a is of type number
const b: NumberOrString = 'hello'; // b is of type string`

Here, we define a generic type called NumberOrString. The generic type T is used to represent the input type that will be passed to NumberOrString.

The NumberOrString type is defined using a conditional type that uses the extends keyword to create a type that can either be number or string depending on the type of the generic type parameter T.

In this case, the conditional type is checking whether T extends number. If it does, then the resulting type is number. If it does not, then the resulting type is string.

Type Guards:

Type guards allow us to narrow down the type of a variable based on a condition. For example, the following code checks whether a variable is an array:

`function isArray(value: any): value is Array {
return Array.isArray(value);
}

const arr: any = [1, 2, 3];

if (isArray(arr)) {
// arr is now of type Array
console.log(arr.length);
}`

Here, we define an function isArray that takes an argument value of type any and returns a boolean value indicating whether value is an array or not.

The return type of this function is value is Array, which means that if the function returns true, TypeScript should infer that the input value is an array of any type.

The implementation of the isArray function simply checks whether the input value is an array using the built-in Array.isArray method, and returns the result.

2. Use Interfaces and Types

Interfaces and types are the bread and butter of TypeScript. They allow us to define custom types and enforce type safety.
When defining types, it is important to follow some best practices:

Always use interfaces for public API signatures.
Use types for private implementation details.
Use types to define complex types or type aliases.

Here's an example of using interfaces and types:

`interface IUser {
id: number;
name: string;
email: string;
}

type UserList = Array;

function getUsers(): Promise {
// fetch users from the server
}`

Here, we define an interface called IUser with three properties: id which is a number, name which is a string, and email which is also a string.
The interface IUser defines the structure of an object representing a user.

Next, we created a type alias called UserList which is an array of IUser objects. This type is used to define the expected return type of the getUsers function.

Finally, the getUsers function is defined as an asynchronous function that returns a Promise of type UserList.

3. Use Enums:

Enums allow you to define a set of named constants. They can be used to make your code more expressive and self-documenting. Here's an example:

enum LogLevel {
  Debug,
  Info,
  Error,
}

function log(level: LogLevel, message: string) {
  console.log(`[${LogLevel[level]}] ${message}`);
}

log(LogLevel.Info, 'Hello, world!');

Here, we define an enum called LogLevel. enum help us to define a set of named constants.

In this case, LogLevel has three constants: Debug, Info, and Error. By default, the values of these constants start at 0 and increment by 1, but we can explicitly set the values if needed.

In this case, Debug has a value of 0, Info has a value of 1, and Error has a value of 2.

We then define a function called log that takes two parameters: level, which is of type LogLevel, and message, which is a string.
The function logs the message to the console with a timestamp and the level of the log message.

The log function is called with LogLevel.Info as the level and the string 'Hello, world!' as the message. This will result in the following output in the console:

[Info] Hello, world!

4. Use Decorators

Decorators are a feature of TypeScript that allows us to modify classes and class members at runtime. They can be used to add functionality to our classes, such as logging or caching. Here's an example:

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with args

Here, we define a function called log that takes three parameters: target, propertyKey, and descriptor. These parameters are part of the JavaScript/TypeScript language feature called decorators, which can be used to modify or enhance the behavior of a class or its members.

When this log function is invoked, it first creates a variable called originalMethod that holds the original value of the function that is being decorated.

In other words, the log function is intercepting the call to the original function, so it can modify its behavior or log additional information.

Next, the descriptor.value is replaced with a new function that logs a message before invoking the original method. This new function takes an arbitrary number of arguments using the spread syntax (...args: any[]), and logs a message to the console using the console.log method.

In conclusion, this article explored various advanced techniques for using TypeScript effectively to improve code readability and maintainability.

We covered 4 techniques, including the use of advanced types such as Union Types, Intersection Types, Conditional Types, and Type Guards, as well as the use of Interfaces, Types, Enums, and Decorators.

By leveraging these advanced TypeScript features, you can write cleaner and more expressive code, enforce type safety, and make your codebase more maintainable and less prone to errors.

Additionally, by using these techniques consistently throughout your codebase, you can improve code consistency and make it easier for developers to understand and maintain your code.

Building a Phone Book Application with Typescript and React

James Oyanna — Mon, 27 Mar 2023 16:52:49 +0000

A phone book is a directory used to store and organize contact information.

In this article, we will be developing a phonebook application using TypeScript and React.
TypeScript is a typed superset of JavaScript that allows us to catch errors at compile-time

Our phone book application will allow users to add, edit, and delete contacts.

By the end of this article, you will have a fully functional phone book application built with TypeScript and React.

Here is how the final application will look like

View Demo Here

We will be using vite to setup our application. Vite is a build tool that is specifically designed for modern web development.

Note: Ensure that Node.js version 14.18+ is installed on your system

You can download Node.js from the official website here, and npm will be installed automatically with Node.js.

Firstly, navigate to the directory where you want to develop your application and scaffold your application with Vite. We can do this by running the following command:

npm create vite@latest

This would ask you for the project name, framework, and variant.

– For project name, you can enter phonebook

– For framework, select React from the list of options

– And for variant, select TypeScript.

When its done, navigate into your project folder by running the command cd phonebook then run the command
npm install to install all required dependencies and then npm run dev to start your application.

You can open your project on Visual Studio code.
Now let's install the dependencies we will need for this application.

Open the command line or bash on your project directory and run the command:
npm install bootstrap@5.2.3 react-bootstrap@2.7.0 react-icons@4.7.1

Styling the application:

To add styling to our phonebook application, open the index.css file existing in your project folder, clear-off the existing styles and add the following content:

Next, you can access the main.tsx file in your project folder and place the import statement for the bootstrap CSS before the import statement for index.css, as shown below:

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css'

Inside your src folder, create a new folder. Name it components. Create a new file, call it Header.tsx and add the following content to it.

Here, we import the "FC" (Functional Component) type from the 'react'.

We then define the Header component as a function component. The ": FC" part after "Header" specifies that the component is of type "FC", which is a shorthand for "React.FunctionComponent". This type is used to indicate that the component is a function that returns JSX.

The function itself returns a JSX element, which in this case is a header element with an h1 element inside it.
You can now test the application by run this command npm run dev.
If every thing works fine, you should see this page display on your browser:

Now let's create the form that would enable us to take input from users.

Create a new file in the components. Name it ContactForm.tsx and add the following code to it.

Here, we import several items from the 'react' and 'react-bootstrap' packages:

We defined the component as a functional component, using the FC type from React. The function is named ContactForm.

We are using the useState hook to initialize a piece of state called contact, which is an object that contains the values of our form fields. Initially, all of the fields are empty strings.

We then define an event handler function called handleOnChange that will be called whenever the user types something into one of the form fields.

This function uses destructuring to get the name and value properties of the target object, which is the input element that triggered the event.

It then uses the setContact function to update the contact state, by returning a new object that has the same properties as the previous contact object, but with the name property set to the new value.

We defined another event handler function called handleOnSubmit that will be called when the user submits the form.

This function prevents the default form submission behavior (which would cause a page refresh) and logs the contact object to the console.
We have not implemented the logic for submitting the form yet.

We returned a Form element from the react-bootstrap package. The onSubmit prop is set to the handleOnSubmit function, so that it will be called when the form is submitted. The form also has a className of "contact-form".

The component returns several Form.Group elements from the react-bootstrap package. Each Form.Group represents a form field, with a controlId prop that uniquely identifies it.

The Form.Control element within each Form.Group represents the actual input field, with props for name, value, type, placeholder, and onChange.

The component also returns a Button element from the react-bootstrap package, which is used to submit the form. It has a variant of "primary", a type of "submit", and a className of "submit-btn".

Now, let's add our Header and ContactForm component to our App.tsxcomponent. Open the App.tsx file and import these components there. Your App.tsx file should now look like this:

Checking your application on your broswer, it should now look like this:

Storing submitted contact information:

Now, let's display the added phone contacts on the page.
To properly manage and store our contacts, we will be using the useReducer hook, a built-in hook in React that would enable us to manage state using a reducer function.

Adding types to our application:

In your src folder, create a file, name it types.ts and add the following content to it:

Here, we have two interfaces- Contact and Action interface.

The Contact interface defines the shape of an object that represents a contact.

The Action interface defines the shape of an object that represents an action.

Create a new folder inside your src folder and name it reducers. Create a file inside the reducers folder and name it contactsReducer.ts and add the following content into it:

Here, we firstly import the Contact and Action interfaces from the types.ts file

We then define an interface called AppState which has a single property, contacts, which is an array of Contact objects. This represents the state of the application that this reducer manages.

We define and export the function contactsReducer which takes two arguments: state and action.

The state argument represents the current state of the application, while the action argument represents an action that has been dispatched to update the state.

The return value of this function is the new state of the application.

We use a switch statement to check the type property of the action argument to determine what action is being performed.

In this case, the type property is expected to be a string that matches the value "ADD_CONTACT", which will be defined later.

We returned a new object that represents the new state of the application.

It copies all the properties of the previous state using the spread operator ...state, and then updates the contacts property with a new array that includes all the previous contacts (...state.contacts) plus the new contact that was passed in the action.payload property.

default: return state;: This default case returns the current state unchanged if the action type is not recognized.

In order to use the contactsReducer, let's import it into App.tsx.
Now, open the App.tsx file and update the code inside to this one below:

const initialState: AppState = { contacts: [] };. In this line we define the initial state for thecontactsReducer.

const [state, dispatch] = useReducer(contactsReducer, initialState);

In this line of code we use the useReducer hook from React to create a state management system for the App component.

useReducer takes two arguments: the first argument is a reducer function, and the second argument is the initial state.

In this case, the contactsReducer function is used as the reducer, and the initialState object is passed as the initial state.

useReducer returns an array with two elements: the current state (state) and a dispatch function that can be used to dispatch actions to update the state.

The state variable is used to store the current state of the component, while dispatch is a function that can be used to update the state by dispatching actions to the contactsReducer function.

<ContactForm dispatch={dispatch} />
Here, We pass the dispatch function as a prop to the ContactFormcomponent so we can dispatch the action to add a contact to the contacts array.

You will get a Typescript error highlighted at dispatch. This is because when we pass any prop to the ContactForm component, we need to state the type of the dispatch prop in the component props list.

In order to specify the dispatch prop type, you can declare an interface named ContactFormProps above the component declaration in the ContactForm.tsx file.

Add this code to your ContactForm.tsx file

interface ContactFormProps {
  dispatch: React.Dispatch<Action>;
}

We use it inside the angle brackets after : FC.

Now, we use the dispatch prop like this:

const ContactForm: FC<ContactFormProps> = (props) => { const { dispatch } = props; // .... };

Also ensure you add an import for the Action type at the top of the file like this:

import { Action } from '../types';

Your updated code in the ContactForm.tsx file should now look like this:

So what we do in the code is to indicate that the ContactFormcomponent will receive a prop with the name dispatch whose type is React.Dispatch.

Implementing the logic to submit our form:

inside the handleOnSubmit method in ContactForm.tsx file, add the following code:


 dispatch({
      type: 'ADD_CONTACT',
      payload: contact
    })

Here, we dispatch an action to the Redux store using the dispatch() function.
The action is an object with a type property set to the string 'ADD_CONTACT' and a payload property set to the variable contact.

Your ContactForm.tsx file will look like this:

Adding the contact List Page:

Now, we want to display all the contacts we will be adding using the form.
Let's create a Page to handle that.
Inside your components folder, create a file, call it ContactList.tsx and add the following content.

Here, the ContactList component takes in an object with a contacts property of type Contact as its props. The component then renders a table that displays the contacts in the contacts prop.

The component returns a JSX that renders the contacts array as a table. It maps over the array and renders a table row for each Contact object, displaying their firstName, lastName, phoneNumber and address properties in separate columns.

We can now display the ContactList component in the App.tsx file.

Import the ContactList.tsx file into the App.tsx file and add it below the ContactForm component.

Your App.tsx file should now look like this:

Here, we added a conditional statement that renders the ContactList component if the contacts array in the state has any items in it. If the array is empty, the ContactListcomponent will not be rendered.

If you check your browser console, you will see a warning in the console as shown below:

This warning message is indicating that each child element of the list returned by the map function in ContactListshould have a unique "key" prop.

In React, when rendering a list of elements, it's important to provide a unique key for each item in the list.

This allows React to efficiently update and re-render only the elements that have changed, instead of re-rendering the entire list every time the state changes.

Let's fix this.

In the ContactForm.tsx file, change the below code:

dispatch({
  type: 'ADD_CONTACT',
  payload: contact
});

to this one:
dispatch({
  type: 'ADD_CONTACT',
  payload: {
    id: Date.now(), // returns current timestamp
    ...contact
  }
});

Here, we have added extra id property to the payload

Upon adding it, Typescript error will be underlined on it. Let's fix it.

Open the types.ts file and add id to the Contact interface like this:


export interface Contact {
  id: number;
    firstName: string;
    lastName: string;
    phoneNumber: string;
    address: string;
    email: string;
  }

Now open the ContactList.tsx file and add the id as key prop to the child trelements that are returned by the map function like this:

{contacts.map(({ id, firstName, lastName, phoneNumber, address, email }) => (
  <tr key={id}>
    <td>{firstName}</td>
    <td>{lastName}</td>
    <td>{phoneNumber}</td>
    <td>{address}</td>
    <td>{email}</td>
  </tr>
))}

Let's do a bit of refactoring to our code.

We will separate the component for displaying different information so it’s easy to re-use and test that component when required.

Create a ContactItem.tsx file inside the components folder and move the contents from the map method of the ContactList.tsx file inside it.

Your ContactItem.tsx file will look like this:

Then change the map method of the ContactList.tsx file from the below code:

{
  contacts.map(({ id, firstName, lastName, phoneNumber, email, address }) => (
    <tr key={id}>
      <td>{firstName}</td>
      <td>{lastName}</td>
      <td>{phoneNumber}</td>
      <td>{email}</td>
      <td>{address}</td>
    </tr>
  ));
}

To this:

 {contacts.map(({ firstName, lastName, phoneNumber, address, email, id}) => (
              <ContactItem
              key={id}
              id={id}
              firstName={firstName}
              lastName={lastName}
              phoneNumber={phoneNumber}
              email={email}
              address={address}
              />
            ))}

Do ensure you import the ContactItem into the ContactList.tsx like this:
import ContactItem from './ContactItem';

Now let's add the ability to Edit and Delete a phone contact.

We will add the Edit and Delete icons using the react-icons library.

We have installed the library when we were starting the project.

In the ContactList.tsx file, let's add two additional items for editing and deleting in the table heading like this.

 <thead className='contacts-list-header'>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Phone</th>
              <th>Email Address</th>
              <th>Adress</th>
              <th>Edit</th>
              <th>Delete</th>
            </tr>
          </thead>

Now, open the ContactItem.tsx file and replace it with this contents:

Here, we added this - import { AiFillDelete, AiFillEdit } from 'react-icons/ai'; to import the Edit and Delete icons from the react-icon library.


     <td>
        <AiFillEdit size={20} color='blue' className='icon' />
      </td>
      <td>
        <AiFillDelete size={20} color='red' className='icon' />
      </td>

We added this code to make use of our icons in the table data.

Your application should now look like this on your browser:

We will now implement the functionality for editing a contact.

In order to show the edit modal popup, we will make use of the react-bootstrap modal component.

Inside your component folder, create a file and name it EditModal.tsx.
Add the this content below inside the file.

Here, we define a EditModal functional component. The component accepts toggleModal, dataToEdit, showModal, dispatch props.

– toggleModalwhich is a function that will toggle the state value used to hide or show the modal

– dataToEditwill be an object containing contact details of the contact to be edited

– showModalwill be a boolean value indicating whether to show or hide the modal

– dispatchfunction which will be helpful to dispatch the edit contact action

The component uses the Modal component from the react-bootstrap package to render a modal dialog that displays a form for editing contact information. The ContactFormcomponent is used to render the form.

We also define the EditModalPropsinterface, which describes the shape of the props object that the component receives.

Right now, our ContactFormcomponent accepts only the dispatch prop so let’s add the remaining required prop in the definition of the type.

Open the ContactForm.tsx file and change the interface to the below code:

interface ContactFormProps {
  dispatch: React.Dispatch<Action>;
  dataToEdit: Contact | undefined;
  toggleModal: () => void;
}

Don't forget to add an import for the Contact and Action at the top of the file like this:

import { Action, Contact } from '../types';

Now, update state object in the ContactFormcomponent to the content below:

const ContactForm: FC<ContactFormProps> = ({  dispatch, dataToEdit, toggleModal}) => {
  const [contact, setContact] = useState({
    firstName: dataToEdit?.firstName ? dataToEdit.firstName : '',
    lastName:  dataToEdit?.lastName ? dataToEdit.lastName : '',
    phoneNumber: dataToEdit?.phoneNumber ? dataToEdit.phoneNumber : '',
    address: dataToEdit?.address ? dataToEdit.address : '',
    email:   dataToEdit?.email ? dataToEdit.email : '',
  });

Here we created a state object for the contact form, and populating its initial values based on any data that might be passed to the component for editing.

If any of the fields are edited by the user, the 'setContact' function can be used to update the state and re-render the component with the new values.

Update the handleOnSubmitmethod to the below code:

const handleOnSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();
    if(!dataToEdit){
      dispatch({
        type: 'ADD_CONTACT',
        payload:{
          id: Date.now(),
          ...contact,
        }

      })
    } else {
      toggleModal();
    }
  };

So at application startup, the 'dataToEdit' variable will be undefined if the user has not clicked on the edit icon. If the edit icon has been clicked, 'dataToEdit' will contain the contact details to be edited.

To handle this, we check if we are currently editing a contact. If we are not, we dispatch the 'ADD_CONTACT' action to add the new contact. If we are editing a contact, we simply close the modal without taking any further action at the moment.

Once we have dispatched the 'ADD_CONTACT' action, we are calling the toggleModal function to close the modal.

Modify the code for the 'Add Contact' button as follows:

<Button variant='primary' type='submit' className='submit-btn'>
  Add Contact
</Button>

to this code:

<Button variant='primary' type='submit' className='submit-btn'>
  {dataToEdit ? 'Update Contact' : 'Add Contact'}
</Button>

By default, the contact form will display the 'Add Contact' button text. If the user clicks on the edit icon, the 'dataToEdit' prop value will be set, and the modal will display the 'Update Contact' text while the user edits the contact information.

Now replace the current content of the App.tsx file with the following code:

Here, two additional states have been declared in the code above.

The code includes two useStatefunctions. The first one controls whether the modal is visible or hidden, while the second one stores the details of the edited contact as an object.

Initially, the object is undefined, but once a value is set, it is of the Contact type with properties such as id, firstName, lastName, and phoneNumber.

To avoid any future TypeScript errors while using dataToEditor setDataToEdit, the type is declared in angle brackets.

In the useEffect hook, the dataToEdit value is set back to undefined once the modal is closed, i.e., when the showModalvalue is false.

In the toggleModalfunction, the updater syntax of state is used to change the showModal state from true to false and vice versa.

If the modal is already open because the showModalvalue is true, calling the toggleModalfunction will close the modal. On the other hand, if the modal is already closed, calling the toggleModalfunction will display the modal.

As you would observed in the App.tsx file, dispatch and handleEdit are passed as props to the ContactList component. Therefore, we need to accept them in the ContactList component.

To do this, open the ContactList.tsx file and replace its contents with the following code:

We can observe here that, handleEdit function takes id as a parameter and does not return anything. Therefore, it has been defined in the ContactListProps interface as follows:

interface ContactListProps {
  // ...
  handleEdit: (id: number) => void;
  // ...
}

Next, we extract the handleEdit and dispatch as props and pass them to the ContactItem component as illustrated below:

 <ContactItem
  key={contact.id}
  {...contact}
  handleEdit={handleEdit}
  dispatch={dispatch}
  />

Now, open the ContactItem.tsx file and replace it with the following content:

Earlier, the ContactItem component was solely receiving attributes from the Contact interface.

we are now also providing the handleEdit and dispatch props, and thus, we have defined another interface as follows:

interface ExtraProps {
  handleEdit: (id: number) => void;
  dispatch: React.Dispatch<Action>;
}

Upon reviewing the application, it can be observed that the modal displays the contact information of the selected contact being edited, as depicted below:

Implementing Edit functionality:

We currently have the user interface to edit and delete. Our next step is to include the code that will enable these functionalities.

To achieve this, you should access the contactsReducer.ts file and append a switch case for the UPDATE_CONTACT action.
Your contactsReducer.ts file should now look like this:

Here, The id of the contact and the updates object containing the new data are being sent for updating, as evident from the above.

The contact with the matching id is being updated using the array map method.
However, upon saving the file, a TypeScript error occurs with this case.

The reason for the error is that the Action interface specifies the payload as a Contact object with properties including id, firstName, lastName,, address and phoneNumber.

However, when handling the UPDATE_CONTACT case, we are only interested in the id and updates properties.

To resolve the error, we must inform TypeScript that the payload can be either a Contact object or a type that includes id and updates properties.

Now, in your types.ts file, let's add a new interface as shown below:


export interface Update {
  id: number;
  updates: Contact;
}

Then update the Action interface to this:

export interface Action { type: 'ADD_CONTACT' | 'UPDATE_CONTACT' payload: Contact | Update; }

After this modification, payload is now a union type that can be either of Contact type or Update type, and type is a string literal type that can be either 'ADD_CONTACT' or 'UPDATE_CONTACT'.

Your types.ts file should now look like this:

Next, import the new action interface into the contactsReducer.ts file

However, you may encounter additional TypeScript errors in your contactsReducer.ts once you make these changes. Lets see how to fix them.

So change ADD_CONTACT switch case from the below code:

case 'ADD_CONTACT':
  return {
    ...state,
    contacts: [...state.contacts, action.payload]
  };

to this code:

case 'ADD_CONTACT':
  return {
    ...state,
    contacts: [...state.contacts, action.payload as Contact]
  };

In this code above, we are using the as keyword for type casting, which explicitly informs TypeScript about the type of action.payload.

And now change the UPDATE_CONTACT switch case from the below code:

case 'UPDATE_CONTACT':
  const { id, updates } = action.payload;
    return {
      ...state,
      contacts: state.contacts.map((contact) => {
        if (contact.id === id) {
          return {
            ...contact,
            ...updates
          };
        }
        return contact;
      })
    };

To this one:

case 'UPDATE_CONTACT':
  const { id, updates } = action.payload as Update;
    return {
      ...state,
      contacts: state.contacts.map((contact) => {
        if (contact.id === id) {
          return {
            ...contact,
            ...updates
          };
        }
        return contact;
      })
    };

By specifying the type of action.payload as Update for the UPDATE_CONTACT case, we have resolved the TypeScript errors.

With this modification, the updated contactsReducer.ts file will now look like this:

To update the contact, you need to dispatch the UPDATE_CONTACT action. You can do this by adding the following code inside the handleOnSubmit method of the ContactForm.tsx file, before calling the toggleModal function:

Open the ContactForm.tsx file and inside the handleOnSubmit method, in the else block, before the toggleModal function call, add the below code:

dispatch({
  type: 'UPDATE_CONTACT',
  payload: {
    id: dataToEdit.id,
    updates: {
      id: Date.now(),
      ...contact
    }
  }
});

And inside the if condition after the dispatch call, add the below code:

setContact({
  firstName: '',
  lastName: '',
  phoneNumber: '',
  address: '',
  email: ''
});

In this code, we are resetting the form state. This ensures that when we dispatch the ADD_CONTACT action, all the user-entered data is cleared out.

Now, if you check the application, you will notice that the contact can be edited successfully.

Upon adding the code in your handleSubmit, your final ContactForm.tsx file should now look like this:

Implementing Delete Contact Functionality:

Let us proceed with the addition of the delete contact feature by opening the contactsReducer.ts file and including a switch case for the DELETE_CONTACT action.


case 'DELETE_CONTACT': {
    const { id } = action.payload;
    return {
      ...state,
      contacts: state.contacts.filter((contact) => contact.id !== id)
    };
  }

To remove a contact, we include only its id in the payload property and apply the array filter method to eliminate the corresponding contact

Now, in the types.ts file, change the Action interface to the following code:

export interface Action {
  type: 'ADD_CONTACT' | 'UPDATE_CONTACT' | 'DELETE_CONTACT'
  payload: Contact | Update;
}

Here, we have included DELETE_CONTACT as an additional type.

Open the ContactItem.tsx file and, within the Delete icon, add an onClick attribute, an event handler that would be triggered when a user clicks on the delete button.

   <AiFillDelete size={20}     onClick={() => {
            const confirmDelete = window.confirm(
              `Are you sure you want to delete contact for user ${firstName} ${lastName}?`
            );
            if (confirmDelete) {
              // dispatch action
            }
          }} color='red' className='icon' />

Here have added a function to display a confirmation dialog box asking the user if they want to delete the contact for the user whose first name and last name are stored in the firstName and lastName variables.

If the user confirms the delete action, the dispatch function is called to send an action to the store.

Your ContactItem.tsx file should now look like this:

However, upon saving the file, a TypeScript error will appear, which is demonstrated below:

The reason for the error is that the Action interface in the contactsReducer.ts file specifies that the payload can be either a Contact or Update, but for the DELETE_CONTACT action, we're only passing an object with an ID inside it and we're missing the 'updates' property.

To resolve this issue, you'll need to modify the Update interface in the following code:

export interface Update { id: number; updates: Contact; }
to this code:
export interface Update { id: number; updates?: Contact; }

In this instance, we've added a question mark symbol to the 'updates' property to make it optional. This resolves the TypeScript error, as we're providing the 'id' property and the 'updates' property can be disregarded.

By making this adjustment, the error in the ContactItem.tsx file will disappear.

If you check the application now, you'll notice that the delete contact feature is functioning correctly

Implementing Validations in our form

At this point, the application's CRUD (Create, Read, Update, and Delete) functionality is complete.

However, we still need to implement validation for adding or modifying contacts.

To achieve this, begin by creating a new state within the ContactForm.tsx file:

const [errorMsg, setErrorMsg] = useState('');

Here, we declare a state handle error messages

Modify the handleOnSubmit method in the ContactForm.tsx file to the following code:

  const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const {firstName, lastName, phoneNumber, address, email} = contact;
    if (
      firstName.trim() === '' ||
      lastName.trim() === '' ||
      phoneNumber.trim() === ''||
      address.trim() === ''||
      email.trim() === ''
    ) {
      setErrorMessage('All the fields are required.');
      return;
     } else if (phoneNumber.length < 3) {
      setErrorMessage('Please enter a phone number with more than 3 numbers.');
      return;
    }
    if (!dataToEdit) {
      dispatch({
        type: 'ADD_CONTACT',
        payload: {
          id: Date.now(),
          ...contact
        }
      });
      setContact({
        firstName: '',
        lastName: '',
        phoneNumber: '',
        address: '',
        email: '',
      });
      setErrorMessage('');
    } else {
      dispatch({
        type: 'UPDATE_CONTACT',
        payload: {
          id: dataToEdit.id,
          updates: {
            id: Date.now(),
            ...contact
          }
        }
      });
      toggleModal();
    }
  };

In this handleSubmit function, extracts the firstName, lastName, and phoneNumber, address, email properties from the contact state.

We then checks if these properties are empty or contain only whitespace, and if so, we set an error message with setErrorMessage and return from it.

If the phone number is not up to 3 numbers, it sets a different error message and returns from the function.

Now, we will display the error message on the screen. To do this, add the following code inside the Form tag and before the Form.Group tag while returning the JSX:

{errorMsg && <p className='errorMsg'>{errorMsg}</p>}

Your entire ContactForm.tsx files hould now look like this:

With these modifications, we have successfully completed building our Phone Book application using React + TypeScript.

The source-code for this project can be found here

Building a full-stack Task Management App with Typescript,React,Nodejs part 1

James Oyanna — Sat, 18 Mar 2023 12:45:54 +0000

Task management applications are great tools to organize tasks, manage projects, and stay on top of deadlines.

In this tutorial, we will be developing a Full-stack Task Manager Application using Typescript, Node.js, MongoDB, and React.

Here is how the final application will look like:

The full source code of the completed of this application can be found here Here

We will start by building the backend of the application using Node.js, Typescript and MongoDB.

Node.js is a popular backend JavaScript runtime that allows us to build scalable and performant applications. MongoDB is a NoSQL database that is ideal for building scalable, high-performance applications with a flexible data model.

In the part 2 of this post, we will then build the frontend using React, a popular JavaScript library for building user interfaces and Typescript, an open-source programming language that adds optional static typing to JavaScript.
React allows us to build complex and interactive user interfaces with ease.Read the part 2 Here

The application will have features like adding, updating, and deleting tasks. We will use RESTful API endpoints to communicate between the backend and frontend.

Setting up the Environment:

To get started with building the Full-stack Task Manager App, you'll need to have Node.js and npm installed on your machine.

You can download Node.js from the official website at https://nodejs.org, and npm will be installed automatically with Node.js.

You will also need to install MongoDB. Download and install the latest version of MongoDB from the official website here. Alternatively, you can also use a cloud-based MongoDB service like MongoDB Atlas.

Install Typescript. If you don't have Typescript already install, you can run the following command to install it globally on your system.

npm install -g typescript

Initialize the project by opening the terminal and create a new directory for the project. Name it task-manager.
Navigate to the directory and run the following command to initialize the project:
npm init -y

This will create a package.json file that will store the project configuration.

Your package.json should look like this. We will update this later on.

Now let's install some of the dependencies we will need for this project.

Set up TypeScript configuration:

Create a new file in your project directory called tsconfig.json and add the following contents:

This file specifies the configuration options for the TypeScript compiler. Here, we are telling the compiler to target ES6, use CommonJS modules, output the compiled JavaScript files to a dist folder, and use the src folder as the root directory for our TypeScript files. We also set esModuleInterop to true to enable interoperability between CommonJS and ES modules.

Installing required packages:

Now let's install the required packages for your project using the following command:

npm install express @types/express typescript nodemon mongoose cors @types/mongoose @types/dotenv @types/cors

Here, we are installing the express package for building our Node.js server and handling HTTP requests.
We are also installing the TypeScript types for these packages using the @types prefix. We are also installing mongoose, a Object-Document Mapping (ODM) library for Node.js and MongoDB, Nodemon, helps to automatically restart our server.

Now, create a new folder called src in your project directory to store your TypeScript files.

Inside the src folder, create a file called app.ts and add the following contents:

Here we have just built a simple Node.js server with Express and TypeScript.
We import the express package and theExpress type from the express package. The Express type is used to define the type of the app variable, which is an instance of the express application.

Next, we create a new instance of the express application by calling the express function and assigning the returned value to the app variable.

We then use the app.use method to add the express.json middleware to our application. This middleware parses incoming requests with JSON payloads and makes the parsed data available on the req.body property.

We then define the PORT variable to hold the port number on which our server will listen.

Finally, we call the app.listen method to start the server and listen on the specified PORT. The console.log statement is used to log a message to the console indicating that the server is listening on the specified port.

To run our server, let install concurrently, a tool for running both the server and client processes at the same time (this is optional. You can decide to run you server alone). Run this command
npm install concurrently

Add this code
"start": "concurrently \"tsc -w\" \"nodemon dist/js/app\""to your script area in your package.json file.

Your package.json file should finally look like this:

You can now run npm start to start your server.

Connecting to a Database:

Now, let's connect our server to a MongoDB database using Mongoose.
Make sure you install and setup mongoDB locally on your computer and create a database called task-manager. Learn how to set it up here

We will be making some changes to our app.ts files by adding some code. Here is the updated app.ts file

import mongoose from 'mongoose';

Here, we added this code to import the mongoose package.
const uri: string =mongodb://localhost:27017/task-manager`

We then define a constant uri that holds the connection URL for our MongoDB database. The URL here specify that the MongoDB server is running on the same machine as the Node.js server and that the name of the database is task-manager.

We are using our locally installed MongoDB instance by specifying the hostname and port number.

The mongoose.connect() method is called, passing in the URI as an argument. This method returns a promise that resolves when the connection is successful, or rejects with an error if there is a problem connecting to the database.

If the connection is successful, a message is logged to the console: 'MongoDB connected successfully...'.

If there is an error connecting to the database, a message is logged to the console with the error details: Initial Distribution API Database connection error occured - ${err}.

The cors() middleware is added to the Express application using app.use(cors()). This allows Cross-Origin Resource Sharing (CORS) for all routes.

The dotenv module is also imported, which loads environment variables from a .env file which we will create later on.

Add Type Interface to the application:

To add a type interface to the task manager app, we can define a TypeScript interface for the task that includes the required properties.

Create a folder called types in your project directory and add a new file inside the types folder. Name it task.ts and add the following content:
`
// Import Mongoose and its types
import { Document } from 'mongoose';

export interface ITask extends Document {
name: string;
description: string;
status: string;
}
`

Here, we first import the Document interface from the mongoose package. We then define an interface called Task that extends the Document interface.
This means that our Task interface will include all the properties and methods of the Document interface, as well as the name, description, and status properties that we've defined.

The name property is defined as a string, the description property is defined as a string, and the status property is defined as a boolean.

Adding Models

Create a folder called models in your project directory, add in it a new file called tasks.ts and the following content

`
import {ITask} from '../types/tasks';
import {model, Schema} from 'mongoose';

const taskSchema = new Schema ({
name:{
type: String,
required: true
},
description: {
type: String,
required: true
},
status: {
type: Boolean,
required: true
}
},
{timestamps: true}
)
export default model('Task', taskSchema);
`

Here we define a Mongoose schema for the Task model, which includes the name, description, and status fields as described in the ITask interface.
import {ITask} from '../types/tasks';
Firstly, we imported the ITask interface from the ../types/tasks module, which defines the type structure for our Task model.

import {model, Schema} from 'mongoose';
We import the model and Schema classes from the mongoose package, which we use to define our schema and create a Mongoose model.

const taskSchema = new Schema ({ ... }, {timestamps: true});
This creates a new Mongoose schema called taskSchema using the Schema class.
We define the schema fields for name, description, and status, as well as the {timestamps: true} option, which adds createdAt and updatedAt fields to our documents to track when they were created and last updated.

export default model<ITask>('Task', taskSchema);
We then export a new Mongoose model called Task, which we create using the model function.

Adding Controllers:

Controllers are modules that handles HTTP requests and responses for a specific set of related routes.

Create a new folder called controllers in our project directory. Add another folder the in controllers folder called tasks and then add an index.ts file in the tasks folder to define our controller functions.

Add the following content in the index.ts file

Here we define and exports four functions: getTasks, addTask, updateTask, and deleteTask.
These functions serve as controllers for our task manager app. They take in two parameters: req and res, which are objects representing the HTTP request and response, respectively.

These parameters have types defined by the Request and Response interfaces from the express package.

The getTasks function queries the database for all tasks and returns them as a JSON object in the response.

The addTask function extracts the necessary fields from the request body, creates a new Task document with the mongoose model, saves it to the database, and returns the new task along with all tasks in the response.

The updateTask function updates a task document in the database based on the ID provided in the URL parameters, and returns the updated task along with all tasks in the response.

The deleteTask function deletes a task document from the database based on the ID provided in the URL parameters, and returns the deleted task along with all remaining tasks in the response.

Adding Routes:

Routes are used to define the mapping between HTTP requests and the corresponding controller functions that will handle those requests.

They determine how an HTTP request is handled and responded to, and are defined using a combination of HTTP methods (e.g. GET, POST, PUT, DELETE) and URL patterns.

Create a new folder called routes in our project directory. add a file inside the routes folder. Name it index.ts and add the following code

`
import { Router } from 'express';
import {getTasks, addTask, updateTask, deleteTask} from '../controllers/tasks';

const router : Router = Router();

router.get('/tasks',getTasks );
router.post('/tasks/add-task', addTask);
router.put('/edit-task/:id', updateTask);
router.delete('/delete-task/:id', deleteTask);

export default router;
`

Here,we import the Router object from the express package. We then import the four controllers we previously created in the task controller directory.

Next, we create a new router instance with Router(). We then use the router object to define the HTTP methods and endpoints for our routes. like this

GET /tasks

This route calls the getTasks function when the client makes a GET request to the '/tasks' endpoint.

POST /tasks/add-task

This route calls the addTask function when the client makes a POST request to the '/tasks/add-task' endpoint.

PUT /edit-task/:id

This route calls the updateTask function when the client makes a PUT request to the '/edit-task/:id' endpoint, where :id represents the ID of the task to update.

DELETE /delete-task/:id

This route calls the deleteTask function when the client makes a DELETE request to the '/delete-task/:id' endpoint, where :id represents the ID of the task to delete.

Using Postman to test our endpoints:

Postman is a popular tool used for testing and interacting with APIs (Application Programming Interfaces).

It allows you to make HTTP requests to a web server and receive responses back. Postman supports various request methods like GET, POST, PUT, DELETE, etc., and lets you view the response returned by the server.

Here's how you can use Postman:

Download and install Postman from the official website Here

Once installed, open Postman and create a new request by clicking on the "New" button in the top left corner of the window.

Select the HTTP method you want to use from the dropdown menu (e.g. GET, POST, PUT, DELETE, etc.).

Enter the URL of the API endpoint you want to interact with in the address bar. In this case we use http://localhost:5000 for our project.

Click on the "Send" button to send the request to the server.
View the response returned by the server in the "Body" section of the response tab.

Building a full-stack Task Management App with Typescript,React,Nodejs part 2

James Oyanna — Sat, 18 Mar 2023 11:38:38 +0000

This tutorial is the part 2 and continuation of the full-stack Task management application we are building. Here is the part 1 of the tutorial.

In this part, we will be building the frontend of the application using React and Typescript.

Typescript Fundamentals Part 2:

James Oyanna — Fri, 03 Mar 2023 13:40:40 +0000

In part 1 of this article - read here, we took a look at the fundamental concepts of Typescript, including its syntax, data types, and functions.

Now let's look at some conceptual aspects of types and type systems.

Union and Intersection Types

Union and intersection types can conceptually be thought of as logical boolean operators (AND, OR) as they pertain to types
Union Type is a type that can have multiple possible types. It is denoted using the | symbol.

Let's take a look at an example. Consider this piece of code below

The type Address above can be either a string or a number. When we try to set Adddress to true, we get an error of

Error: Type 'boolean' is not assignable to type 'string | number'.

Let’s write a function that can operate on strings or numbers as well:

If we try to execute the function printId by passing a number or a string as an argument, this will work fine.

printId(101); // work fine printId("202"); // work fine printId(true); // throws an error

We are going to get an error if we pass any other type other than a string or a number.

Intersection type:

An intersection type is a type that combines two or more types into a single type. It is denoted using the & symbol.
Let's look at an example:

In the example above, the person type is an intersection of name and age, which means that any value of type person must have all the properties of name and age.

The james variable is of type person and has all the required properties, so it is allowed. However, the kola variable does not.

Interfaces and Type Aliases

Typescript provides two mechanisms for centrally defining types and giving them useful and meaningful names: interfaces and type aliases.

We will study both concepts in depth, and explain when it makes sense to use each type.
Interfaces and type aliases are both used to define custom types that can be used throughout our codebase.

Type aliases:

Consider this piece of code: {name: string, email: string}. It's a syntax we’ve used before for type annotations.

This syntax will get increasingly complicated as more properties are added to this type.

Furthermore, if we pass objects of this type around through various functions and variables, we will end up with a lot of types that need to be manually updated whenever we need to make any changes!

Type aliases help to address this, by allowing us to:

define a more meaningful name for this type
declare the particulars of the type in a single place
import and export this type from modules, the same as if it were an exported value.

It can be used to make complex types more readable or to define a type that is used in multiple places in the codebase.
Let's take a look at this example code:

In the code above, LocationType is a type alias that defines an object with a city property of type string and a cityCode property of type number. The lagos variable is of type LocationType and has all the required properties, so it is allowed.

Lets take a look at how we can use type aliases in functions;
Consider this type alias code syntax ;

Now consider this function

function printContactInfo(info: UserContactInfo)
 { console.log(info) console.log(info.email) 
} 
const painter = { 
name: "kola ojo", 
email: "kole@gmail.com", 
favoriteColor: "Off White", 
} 
printContactInfo(painter)

This code defines a function called printContactInfo that takes an argument of type UserContactInfoand prints it to the console.

Also, we define an object called painter that has a name, email, and favoriteColor property.

Here, theUserContactInfo type is a type alias that is defined at the top.

UserContactInfo type defines an object that has a name and email property, which is why the painter object is able to be passed as an argument to the printContactInfo function.

When the printContactInfo function is called with the painter object as an argument, it logs the entire object to the console using console.log(info) and logs the email property using console.log(info.email).

Since the painter object has an email property, both of these log statements will output the expected value to the console.

This example code demonstrates how type aliases can be used to define custom types in Typescript and how they can be used to create more expressive and type-safe code.

By defining aUserContactInfo type alias, the code can ensure that any object passed to the printContactInfo function has the required properties, which helps to catch errors early in the development process.

Interfaces

An interface is a Typescript feature that allows you to define the shape of an object, including its properties and methods.
Let's take a look at an example:

Here in the code above, Person is an interface that defines an object with a name property of type string and an age property of type number.

The james variable is of type Person and has all the required properties, so it this work fine.

Lets take a look at another example;
consider the code below:


interface Userinfo {
  name: string;
  email: string;
}
function printUserInfo(info:Userinfo){
  info.name

}

Here we define an interface called UserInfo with two properties: name and email, both of which are of type string.

We define a function, printUserInfo that takes an argument of type UserInfo, and it accesses the name property of that argument using the dot notation (info.name).
This is just how we can access an interface property in Typescript.

Inheritance in interfaces

The way JavaScript class “inherits” behavior from a base class, is the same as what Typescript calls a heritage clause: extends

Let's take a look at an example of how we can use inheritance with classes and interfaces in Typescript.

class Animal {
  eat(food: string) {
    console.log(`Eating ${food}`);
  }
}

class Dog extends Animal {
  bark() {
    return "Woof";
  }
}

const d = new Dog();
d.eat("bone"); // Provide an argument to the eat method

This code illustrates how classes can inherit properties and methods from other classes using the extends keyword.

In the code snippet, we have two classes: Animal and Dog.

The Animal class defines an eat method, which takes a food parameter of type string. This eat method is responsible for logging a message to the console, indicating that the animal is eating the specified food.

The Dog class extends the Animal class. This means that it inherits all the properties and methods of the Animal class, including the eat method. In addition to inheriting, the Dog class also introduces its own method called bark, which returns the string "Woof."

When we create a new instance of the Dog class and assign it to the variable d, this instance inherits all the properties and methods from the Animal class, including the eat method. However, the bark method is specific to the Dog class and is not available on the Animal class.

To demonstrate the code in action, we invoke the d.eat("bone") method. TypeScript recognizes that d is an instance of the Dog class, which extends Animal, and allows us to call the eat method on the d instance while providing the required food parameter, in this case, "bone."

Furthermore, if we call d.bark(), TypeScript recognizes that d is an instance of Dog, which has a bark method, and it returns the string "Woof."

Interfaces and type Aliases, which one to choose:

Interfaces and type aliases are both useful tools for defining custom types in Typescript.
Interfaces are often used to define the shape of an object, while type aliases are used to create more readable or reusable types.
In many situations, either a type alias or an interface would be perfectly fine,

however, If you need to define something other than an object type (e.g., use of the | union type operator), you must use a type alias
If you need to define a type to use with the implements heritage term, it’s best to use an interface
If you need to allow consumers of your types to augment them, you must use an interface.