Forem: Fahd Adebayo

Deploying a TypeScript Express API to Render: A Complete Journey

Fahd Adebayo — Sat, 18 Oct 2025 23:02:23 +0000

🎯 Project Overview

I successfully deployed a TypeScript-based Express.js API to Render.com as part of the HNG Stage 0 Backend task. The API provides profile information and integrates with an external Cat Facts API.

Tech Stack:

Node.js with TypeScript
Express.js
dotenv for environment variables
Custom middleware (CORS, error handling)
Structured MVC architecture

Live Deployment: [Your Render URL here]

📋 Initial Project Structure

project/
├── src/
│   ├── app.ts                    # Express app configuration
│   ├── index.ts                  # Module exports
│   ├── server.ts                 # Server entry point
│   ├── config/
│   │   └── env.ts                # Environment configuration
│   ├── controllers/
│   │   └── profileController.ts
│   ├── middleware/
│   │   ├── cors.ts
│   │   └── errorHandler.ts
│   ├── routes/
│   │   └── index.ts
│   ├── services/
│   │   ├── catFactService.ts
│   │   └── profileService.ts
│   ├── types/
│   │   └── index.ts
│   └── utils/
│       └── logger.ts
├── package.json
├── tsconfig.json
└── .env.example

🚧 Challenges Encountered & Solutions

Challenge 1: Module Not Found Error

Error:

Error: Cannot find module '/opt/render/project/src/index.js'

Root Cause:
Render was trying to run node index.js but my project was written in TypeScript (.ts files), not JavaScript (.js files). TypeScript needs to be compiled before execution.

Solution:

Added build script to compile TypeScript:

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/server.js"
  }
}

Configured Render build command:
- Build Command: npm install && npm run build
- Start Command: npm start

Key Learning: TypeScript projects require a compilation step before deployment. The tsc compiler transforms .ts files into .js files that Node.js can execute.

Challenge 2: Application Exiting Early

Error:

==> Running 'npm start'
==> Application exited early

Root Cause:
Two issues were causing silent failures:

The start command pointed to dist/index.js, but the actual server startup code was in server.ts
The server wasn't binding to 0.0.0.0, which Render requires

Solution:

Fixed the entry point mismatch:

// package.json - Changed from index.js to server.js
{
  "scripts": {
    "start": "node dist/server.js"
  }
}

Updated server binding for Render:

// src/server.ts
const HOST = '0.0.0.0'; // Critical for Render!

app.listen(config.port, HOST, () => {
    logger.info(`Server is running on ${HOST}:${config.port}`);
});

Key Learning: Cloud platforms like Render require servers to bind to 0.0.0.0 (all network interfaces) rather than localhost or 127.0.0.1. This allows the platform's load balancer to route traffic to your application.

Challenge 3: TypeScript Type Error

Error:

Argument of type 'string | number' is not assignable to parameter of type 'number'

Root Cause:
process.env.PORT returns a string, but app.listen() expects a number for the port parameter.

Solution:

// src/config/env.ts - Before
export const config = {
    port: process.env.PORT || 3000, // Could be string or number
};

// After - Ensures port is always a number
export const config = {
    port: parseInt(process.env.PORT || '3000', 10),
};

Key Learning: Environment variables are always strings in Node.js. Type coercion is necessary when working with numeric values from process.env.

🛠️ Configuration Files

package.json

{
  "name": "hng-backend-stage0",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node dist/server.js",
    "dev": "ts-node src/server.ts"
  },
  "dependencies": {
    "express": "^4.18.2",
    "dotenv": "^16.0.3"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/node": "^20.0.0",
    "@types/express": "^4.17.17",
    "ts-node": "^10.9.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Render Settings

Root Directory: (empty/default)
Build Command: npm install && npm run build
Start Command: npm start
Environment Variables:
- USER_EMAIL: your.email@example.com
- USER_NAME: Your Full Name
- USER_STACK: Node.js/Express/TypeScript
- PORT: (auto-set by Render)

📸 Deployment Process Screenshots

1. Initial Build Success

found 0 vulnerabilities
> hng-backend-stage0@1.0.0 build
> tsc
==> Build successful 🎉

2. Successful Deployment

==> Running 'npm start'
> hng-backend-stage0@1.0.0 start
> node dist/server.js
PORT = 10000
Server is running on 0.0.0.0:10000
Profile endpoint: http://0.0.0.0:10000/me

3. API Response

{
  "email": "your.email@example.com",
  "current_datetime": "2025-10-18T14:30:00Z",
  "github_url": "https://github.com/yourusername/repo",
  "cat_fact": "Cats sleep 70% of their lives."
}

💡 Key Lessons Learned

1. TypeScript Compilation Pipeline

TypeScript projects require a build step before deployment. Understanding the compilation process (.ts → .js) is crucial for production deployments.

2. Cloud Platform Requirements

Different hosting platforms have specific requirements:

Host binding: Must use 0.0.0.0 instead of localhost
Port configuration: Use process.env.PORT provided by the platform
Entry points: Start command must match your actual server file

3. Environment Variable Management

Always validate and parse environment variables
Use sensible defaults for development
Document required variables in .env.example
Set production values in the hosting platform's dashboard

4. Debugging Deployment Issues

Systematic approach to troubleshooting:

Check build logs for compilation errors
Verify file structure matches start command
Ensure all dependencies are listed in package.json
Add console logs to track startup process
Implement error handlers for uncaught exceptions

5. Project Structure Best Practices

Separate concerns (config, controllers, services, routes)
Use TypeScript for type safety
Implement proper error handling middleware
Structure code for scalability

🎓 What This Task Taught Me

Technical Skills

TypeScript Configuration: Understanding tsconfig.json and compilation outputs
Express.js Architecture: Building scalable API structures with proper separation of concerns
Cloud Deployment: Platform-specific requirements and configurations
Environment Management: Proper handling of environment variables across environments

Problem-Solving Approach

Read error messages carefully - They often contain the exact solution
Understand the deployment pipeline - Build → Upload → Deploy → Run
Test locally first - Ensure the build process works before deploying
Use systematic debugging - Eliminate possibilities one by one

Professional Development

Documentation: Writing clear, comprehensive documentation
Version Control: Proper Git workflow for deployment
Production Readiness: Considerations beyond "it works on my machine"
Error Handling: Implementing robust error catching and logging

🚀 Next Steps & Improvements

Add Health Check Endpoint: For monitoring service status
Implement Rate Limiting: Protect against API abuse
Add Request Validation: Using libraries like Joi or Zod
Set Up CI/CD: Automated testing and deployment pipeline
Add Monitoring: Application performance monitoring (APM)
Implement Caching: For external API responses
Write Tests: Unit and integration tests for reliability

🔗 Resources & References

📝 Conclusion

This deployment task was an excellent learning experience that reinforced the importance of understanding the complete deployment pipeline. From TypeScript compilation to platform-specific configurations, each challenge provided valuable insights into production-ready application development.

The key takeaway: Success in deployment comes from understanding not just how to write code, but how that code transforms and executes in a production environment.

Project Repository: [GitHub Link]
Live API: [Render URL]
Author: [Your Name]
Date: October 18, 2025
HNG Internship: Stage 0 Backend Task

HNGInternship #TypeScript #ExpressJS #NodeJS #BackendDevelopment #DevOps

E-Sync - ALX Portfolio Project

Fahd Adebayo — Sun, 10 Mar 2024 20:35:20 +0000

Are you tired of the fragmented chaos that often accompanies event planning? Have you ever wished for a seamless platform where you can collaborate with others, discover exciting events, and engage with your community effortlessly? Look no further, because E-Sync is here to revolutionize the way you experience events.

Meet the Team Behind E-Sync

At the helm of this innovative project is Fahd Adebayo, a frontend development enthusiast with a passion for crafting exceptional user experiences. Despite the solo journey, Fahd's expertise in frontend development, coupled with his willingness to delve into backend technologies, ensures that E-Sync will deliver nothing short of excellence.

Powering E-Sync: Cutting-Edge Technologies

E-Sync harnesses the power of modern technologies to offer a seamless and intuitive user experience:

JavaScript & React: Driving the frontend interface with dynamic and responsive components.
Tailwind CSS: Styling E-Sync's sleek and polished design for optimal user engagement.
Node.js & Express: Providing a robust backend infrastructure for seamless data management and API integration.
Clerk: Ensuring secure and hassle-free user authentication for peace of mind.
Vercel: Hosting E-Sync with unparalleled reliability and efficiency, ensuring a smooth user experience.

Addressing Challenges: Streamlining Event Planning

E-Sync tackles the complexities of event planning head-on by offering a centralized platform where users can collaborate, discover, and engage with events effortlessly. By providing real-time updates, efficient communication channels, and collaborative tools, E-Sync empowers event organizers to orchestrate successful gatherings with ease.

Understanding Risks: Safeguarding Your Experience

E-Sync acknowledges potential technical and non-technical risks and implements robust safeguards to mitigate them:

Data Security Concerns: E-Sync prioritizes data security through encryption protocols, secure API connections, and regular audits to safeguard user information.
Low User Adoption: Extensive user testing and a user-friendly interface ensure that E-Sync garners the attention and engagement it deserves.

Building Blocks: Infrastructure and Development Process

E-Sync adopts best practices in branching, merging, deployment, and data population to ensure a seamless development process and a stable, scalable platform:

Gitflow Workflow: Structured branching and merging strategy to facilitate collaboration and maintain code quality.
Continuous Deployment: Deploying updates to the production environment seamlessly for uninterrupted user experience.
Automated Testing and Quality Checks: Leveraging automated testing tools and code quality checks to ensure reliability and performance.

Learning from Existing Solutions: Innovating for Your Needs

While drawing inspiration from existing platforms like Eventbrite, Meetup, and Facebook Events, E-Sync stands out by prioritizing collaborative event planning, innovative social integration, and personalized recommendations tailored to your community's needs.

Unlocking E-Sync: Features and Functionality

From user authentication and event creation to RSVP tracking and personalized recommendations, E-Sync offers a comprehensive suite of features to elevate your event experience:

User Authentication and Profiles: Secure login and registration processes for hassle-free access.
Event Creation and Management: Intuitive tools for creating, editing, and managing events seamlessly.
RSVP and Attendance Tracking: Effortlessly manage event attendance and engagement.
Event Discovery: Discover exciting events based on your preferences and location.
Social Integration: Connect with your community and share events effortlessly.
Feedback and Ratings: Provide valuable feedback and ratings to enhance future events.

Join the E-Sync Community Today!

Elevate your events, sync your experience with E-Sync. Whether you're an event organizer seeking streamlined planning tools or an attendee looking for exciting gatherings, E-Sync has something for everyone. Join us on this journey and experience events like never before. Welcome to E-Sync, where every event is an unforgettable experience.

Mastering Animation with GSAP: A Comprehensive Guide

Fahd Adebayo — Fri, 09 Feb 2024 21:50:14 +0000

Introduction
In the dynamic world of web development, creating captivating animations that enhance user experience is essential. GreenSock Animation Platform (GSAP) stands out as a powerful tool for crafting stunning animations with ease and precision. Whether you're a beginner or an experienced developer, mastering GSAP opens up a world of possibilities to bring your web projects to life. In this comprehensive guide, we'll delve into the fundamentals of GSAP, explore its key features, and learn how to leverage its capabilities to create impressive animations.

Understanding GSAP
GSAP is a JavaScript library renowned for its performance, flexibility, and extensive features for animating HTML elements. Unlike CSS-based animations, GSAP offers unparalleled control and smoothness, making it the preferred choice for many developers. With GSAP, you can animate almost any attribute of HTML elements, including position, scale, rotation, opacity, and more. Its intuitive syntax and robust documentation make it accessible to developers of all skill levels.

Getting Started with GSAP
To begin using GSAP, you'll first need to include the library in your project. You can either download the library files or include them via a content delivery network (CDN). Once included, you can start animating elements using GSAP's powerful functions and methods.

Basic Animation Techniques
GSAP provides various methods for animating elements, each tailored to suit different animation needs. TweenMax, TweenLite, TimelineMax, and TimelineLite are some of the core classes offered by GSAP, each serving a specific purpose in the animation workflow. TweenMax, for instance, is a comprehensive tool for animating single elements, while TimelineMax allows for sequencing multiple animations with precise control.

Creating Complex Animations
With GSAP, you can unleash your creativity and build intricate animations that captivate your audience. From simple fades and rotations to complex morphs and sequences, GSAP empowers you to realize your vision with ease. By combining tweens, timelines, and various easing functions, you can achieve fluid and lifelike animations that elevate your web projects to new heights.

Optimizing Performance
While GSAP excels in delivering smooth animations, optimizing performance is crucial, especially for web applications targeting a wide range of devices. Minifying your GSAP code, limiting the number of animated elements, and utilizing hardware acceleration are some strategies to ensure optimal performance. Additionally, GSAP's built-in features, such as batch processing and auto-alpha, help streamline animations and minimize resource consumption.

Exploring Advanced Features
Beyond basic animations, GSAP offers a plethora of advanced features to enhance your animation workflow. From motion path animations and draggable elements to physics-based effects and SVG animation, GSAP empowers you to push the boundaries of web animation. By exploring the extensive documentation and community forums, you can discover new techniques and solutions to achieve your desired effects.

Conclusion
In conclusion, mastering GSAP opens up a world of possibilities for creating captivating animations in web development. With its intuitive syntax, robust features, and unparalleled performance, GSAP remains a top choice for developers seeking to breathe life into their web projects. By understanding the fundamentals, exploring advanced techniques, and experimenting with different animation effects, you can leverage GSAP to create immersive and engaging user experiences that leave a lasting impression. So why wait? Dive into the world of GSAP and unleash your creativity today!