Forem: Patrick Mwangi

Tabiya Hackathon Project

Patrick Mwangi — Sat, 15 Feb 2025 11:54:26 +0000

AI Powered job seeking app

File Structure for Backend and Frontend:

/hackathon-project
├── backend
│   ├── app.py
│   ├── config.py
│   ├── models.py
│   ├── routes.py
│   ├── services
│   │   ├── nlp_service.py
│   │   ├── auth_service.py
│   │   └── chatbot_service.py
│   ├── database
│   │   └── db_init.py
│   ├── requirements.txt
└── frontend
    ├── public
    │   └── index.html
    ├── src
    │   ├── components
    │   │   ├── JobMatch.js
    │   │   ├── ChatBot.js
    │   │   └── Dashboard.js
    │   ├── App.js
    │   ├── index.js
    └── package.json

Backend Code (Flask + Python)

`app.py`

from flask import Flask
from routes import auth_blueprint, nlp_blueprint
from database.db_init.py import init_db

app = Flask(__name__)

# Initialize database
init_db(app)

# Register routes
app.register_blueprint(auth_blueprint)
app.register_blueprint(nlp_blueprint)

if __name__ == '__main__':
    app.run(debug=True)

`config.py`

import os

class Config:
    SECRET_KEY = os.environ.get('SECRET_KEY') or 'supersecretkey'
    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or 'sqlite:///site.db'
    SQLALCHEMY_TRACK_MODIFICATIONS = False

`models.py`

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(150), unique=True, nullable=False)
    email = db.Column(db.String(150), unique=True, nullable=False)
    password = db.Column(db.String(60), nullable=False)

class Job(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(150), nullable=False)
    description = db.Column(db.Text, nullable=False)

`routes.py`

from flask import Blueprint, jsonify, request
from services.nlp_service import classify_job
from services.auth_service import login_user

auth_blueprint = Blueprint('auth', __name__)
nlp_blueprint = Blueprint('nlp', __name__)

@auth_blueprint.route('/login', methods=['POST'])
def login():
    data = request.json
    return login_user(data['username'], data['password'])

@nlp_blueprint.route('/match', methods=['POST'])
def match():
    job_desc = request.json.get('description')
    return classify_job(job_desc)

`nlp_service.py`

import requests

def classify_job(description):
    url = 'https://tabiya-api.com/classify'
    response = requests.post(url, json={'description': description})
    return response.json()

`auth_service.py`

from models import User

def login_user(username, password):
    user = User.query.filter_by(username=username).first()
    if user and user.password == password:
        return {'message': 'Login successful'}, 200
    return {'message': 'Invalid credentials'}, 401

`database/db_init.py`

from flask_sqlalchemy import SQLAlchemy
from models import db

def init_db(app):
    app.config.from_object('config.Config')
    db.init_app(app)
    with app.app_context():
        db.create_all()

`requirements.txt`

Flask==2.0.1
Flask-SQLAlchemy==2.5.1
requests==2.26.0

Frontend Code (React + JavaScript)

`src/App.js`

import React from 'react';
import JobMatch from './components/JobMatch';
import ChatBot from './components/ChatBot';
import Dashboard from './components/Dashboard';

function App() {
  return (
    <div>
      <h1>Hackathon Project</h1>
      <JobMatch />
      <ChatBot />
      <Dashboard />
    </div>
  );
}

export default App;

`src/components/JobMatch.js`

import React, { useState } from 'react';
import axios from 'axios';

const JobMatch = () => {
  const [description, setDescription] = useState('');
  const [result, setResult] = useState(null);

  const handleSubmit = async () => {
    const response = await axios.post('/match', { description });
    setResult(response.data);
  };

  return (
    <div>
      <h2>Job Matcher</h2>
      <textarea onChange={(e) => setDescription(e.target.value)} />
      <button onClick={handleSubmit}>Match Job</button>
      {result && <div>{JSON.stringify(result)}</div>}
    </div>
  );
};

export default JobMatch;

`src/components/ChatBot.js`

import React from 'react';

const ChatBot = () => {
  return (
    <div>
      <h2>AI Chatbot</h2>
      <p>Chatbot will be implemented here...</p>
    </div>
  );
};

export default ChatBot;

`src/components/Dashboard.js`

import React from 'react';

const Dashboard = () => {
  return (
    <div>
      <h2>Entrepreneurship Dashboard</h2>
      <p>Track your progress and business plans here...</p>
    </div>
  );
};

export default Dashboard;

Run Instructions:

Backend:
- Install dependencies: pip install -r requirements.txt.
- Start the server: python app.py.
Frontend:
- Navigate to the frontend folder.
- Install dependencies: npm install.
- Start the frontend: npm start.

Updated Backend with Error Handling and Real-time Job Matching

1. Error Handling in Backend Services

Let's first add proper error handling to the backend services, ensuring the app returns meaningful messages instead of crashing on exceptions.

`services/nlp_service.py` (Error handling added)

import requests

def classify_job(description):
    try:
        url = 'https://tabiya-api.com/classify'
        response = requests.post(url, json={'description': description})
        response.raise_for_status()  # Raises HTTPError for bad responses
        return response.json()
    except requests.exceptions.HTTPError as http_err:
        return {"error": f"HTTP error occurred: {http_err}"}, 500
    except Exception as err:
        return {"error": f"An error occurred: {err}"}, 500

`auth_service.py` (Error handling added)

from models import User

def login_user(username, password):
    try:
        user = User.query.filter_by(username=username).first()
        if user and user.password == password:
            return {'message': 'Login successful'}, 200
        return {'message': 'Invalid credentials'}, 401
    except Exception as err:
        return {"error": f"An error occurred: {err}"}, 500

2. Real-time Job Matching with WebSockets

To implement real-time job matching, we can use Flask-SocketIO on the backend and socket.io on the frontend for real-time communication.

Add WebSocket Support to Backend

Install Flask-SocketIO:

pip install flask-socketio

Update `app.py` to support SocketIO:

from flask import Flask
from flask_socketio import SocketIO, emit
from routes import auth_blueprint, nlp_blueprint
from database.db_init import init_db

app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*")  # Enable WebSockets

# Initialize database
init_db(app)

# Register routes
app.register_blueprint(auth_blueprint)
app.register_blueprint(nlp_blueprint)

# Real-time job matching with WebSockets
@socketio.on('match_job')
def handle_job_matching(data):
    job_desc = data.get('description')
    if not job_desc:
        emit('job_match_result', {'error': 'Job description is required'}, broadcast=True)
        return
    result = classify_job(job_desc)
    emit('job_match_result', result, broadcast=True)  # Broadcast result

if __name__ == '__main__':
    socketio.run(app, debug=True)

3. Frontend Real-time Integration

Install `socket.io-client` for real-time communication:

npm install socket.io-client

Update `JobMatch.js` for real-time communication:

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:5000');  // Backend WebSocket URL

const JobMatch = () => {
  const [description, setDescription] = useState('');
  const [result, setResult] = useState(null);

  useEffect(() => {
    // Listen for real-time job match results from server
    socket.on('job_match_result', (data) => {
      setResult(data);
    });
  }, []);

  const handleSubmit = () => {
    // Emit job description to backend for real-time matching
    socket.emit('match_job', { description });
  };

  return (
    <div>
      <h2>Real-time Job Matcher</h2>
      <textarea onChange={(e) => setDescription(e.target.value)} />
      <button onClick={handleSubmit}>Match Job</button>
      {result && <div>{JSON.stringify(result)}</div>}
    </div>
  );
};

export default JobMatch;

Updated Structure:

/hackathon-project
├── backend
│   ├── app.py                  # Flask backend with SocketIO
│   ├── config.py               # Configs for database, secrets
│   ├── models.py               # Database models
│   ├── routes.py               # API routes
│   ├── services
│   │   ├── nlp_service.py      # NLP matching logic with error handling
│   │   ├── auth_service.py     # Authentication logic with error handling
│   ├── database
│   │   └── db_init.py          # Database initialization
│   ├── requirements.txt        # Backend dependencies
└── frontend
    ├── src
    │   ├── components
    │   │   ├── JobMatch.js     # Frontend with real-time job matching
    │   └── App.js              # Main frontend app
    ├── package.json            # Frontend dependencies

Instructions to Run:

Backend:
- Install dependencies: pip install -r requirements.txt
- Run the backend: python app.py (now with WebSockets support)
Frontend:
- Navigate to the frontend folder.
- Install dependencies: npm install.
- Run the frontend: npm start.

Guide on Building a Full-Stack Authentication System with Python and Next.js

Patrick Mwangi — Sat, 28 Sep 2024 17:11:38 +0000

Guide on Building a Full-Stack Authentication System with Python and Next.js

This repository, Mumina04/app-authentication, implements a complete user authentication system that can be integrated into web applications. It uses Python for the backend to handle secure user login and registration, and Next.js (with TypeScript) for the frontend. The project provides a foundational framework for building modern web applications requiring user authentication, such as Software-as-a-Service (SaaS) platforms or internal enterprise tools.

Overview
Key Technologies
Project Structure
Setup Instructions
Authentication Flow
Common Debugging Issues

Overview

The repository implements a modern full-stack authentication mechanism where the backend handles user credentials, while the frontend manages user interactions such as login forms and token storage. With Python responsible for the backend operations like session management, password hashing, and user database handling, the Next.js frontend offers a responsive user interface for managing authentication workflows.

This architecture is common for web applications that require secure, scalable authentication solutions. The project likely follows best practices for secure password handling (e.g., hashing) and may support features like session-based authentication or JWT (JSON Web Tokens), which enables stateless user sessions.

Core Features:

User Registration: Allows new users to sign up with a secure method of storing passwords.
User Login: Validates user credentials and issues a session or token for future requests.
Token-based Authentication: The system likely uses JWTs, which securely transmit user identity and authorization between the frontend and backend.
Frontend-Backend Communication: The frontend securely sends user data (e.g., login credentials) to the backend API for processing, ensuring the user experience is smooth and data security is maintained.

Key Technologies

The project leverages a combination of modern web technologies to handle different aspects of the authentication process:

Python: The backend is written in Python and handles the core business logic for user authentication, such as validating credentials, managing sessions, and interacting with a database.
Next.js (TypeScript): The frontend is developed using Next.js, a React framework, for server-side rendering and API routes. TypeScript is used to add type safety to the JavaScript code, making it more reliable and easier to maintain.
JWT: Likely used for session management and secure authentication across stateless HTTP requests.
CSS and JavaScript: Minimal use of CSS to style the frontend components and JavaScript for frontend interactions such as form submission and token management.

Project Structure

The project is structured to keep backend and frontend components cleanly separated, ensuring ease of development and deployment:

app-authentication/
│
├── authentication_app/        # Python backend
│   ├── auth/                  # Handles authentication logic (register, login)
│   └── models/                # Database models, includes User models
│
├── my-nextjs-app/             # Next.js frontend
│   ├── components/            # UI components such as login and signup forms
│   ├── pages/                 # Next.js pages (login, signup)
│   └── api/                   # Frontend API routes for interacting with backend
│
├── README.md                  # Project documentation
├── requirements.txt           # Python dependencies
└── ...

Directory Breakdown

authentication_app/: This directory contains the backend logic for managing user authentication. It likely has code for registering users, validating login credentials, and generating tokens (JWTs).
my-nextjs-app/: The frontend, built using Next.js, manages the user interface for login and registration. It includes reusable components like forms and pages for interacting with the backend.
requirements.txt: Lists the Python dependencies required for the backend, including libraries for handling user authentication, password hashing, and possibly database management.

Setup Instructions (Beginner Friendly)

To run the application locally, follow these steps. If you are unfamiliar with some of the tools or commands, don't worry – each step is broken down with additional guidance.

Clone the repository:

First, you'll need to copy the project files from GitHub to your local machine. Open your terminal or command prompt and run the following command:

   git clone https://github.com/Mumina04/app-authentication.git

This will download the project into a folder named app-authentication. After cloning, navigate into the folder using:

   cd app-authentication

This command changes the directory to the newly cloned project.

Install Python dependencies:

Make sure Python 3 is installed on your machine. You can check if Python is installed by running:

   python --version

If you see a version number (e.g., Python 3.9.7), you are good to go. If not, you will need to install Python first.

Now, install the required Python packages using the pip package manager, which is used to install Python libraries. Run the following command inside the app-authentication directory:

   pip install -r requirements.txt

This will install all the necessary libraries listed in the requirements.txt file.

Set up the Next.js frontend:

Now, we need to set up the frontend (the part of the application users interact with). The frontend is built with Next.js, which requires Node.js to run.

Install Node.js: If you haven't installed Node.js, download and install it from here.
Navigate to the frontend folder: After installing Node.js, switch to the my-nextjs-app directory inside the project:
```
  cd my-nextjs-app
```
Install Node.js dependencies: In this folder, run the following command to install the dependencies for the frontend:
```
  npm install
```

This command installs all the necessary packages for the frontend, like React and Next.js.

Run the applications:

At this point, you're ready to run both the backend (Python) and frontend (Next.js) applications.

Start the backend server:

Go back to the app-authentication folder, where the backend code lives, using:
```
 cd ..
```
Now start the backend server with this command:
```
 python run_backend.py  # Make sure to replace this with the actual script if different
```
This command starts the backend, which handles user authentication, like registering users and verifying logins.
Start the Next.js frontend:

After starting the backend, go back to the my-nextjs-app folder:
```
 cd my-nextjs-app
```
Run the following command to start the Next.js frontend:
```
 npm run dev
```
By default, the frontend should be available at http://localhost:3000 in your browser.

You can open this URL in any web browser to interact with the login and registration forms provided by the application.

Authentication Flow

The project implements a typical authentication flow used in modern web applications:

User Registration:
- The user submits their registration details (e.g., email, password) via the frontend.
- The backend processes the request, hashes the password securely (likely using a library like bcrypt), and stores the user details in a database.
User Login:
- The user provides their credentials via the login form in the frontend.
- These credentials are sent to the backend, which verifies the username and password.
- Upon successful validation, the backend generates a JWT or session token, which is returned to the frontend.
Token Management:
- The frontend stores the token (in local storage or cookies) and includes it in subsequent requests to protected routes.
- The backend verifies the token for each request, ensuring the user is authenticated before granting access to sensitive resources.
Frontend Pages:
- Login and Signup Pages: These are handled by the Next.js pages under the /pages directory, responsible for rendering forms and sending requests to the backend API.
- Protected Routes: The frontend checks for a valid token before rendering certain pages, ensuring only authenticated users can access them.

Authentication Flow Diagram

To better understand the authentication process, here's a simple flowchart illustrating the flow between the user, frontend, and backend during the authentication process:

Common Debugging Issues

Here are some common issues you might encounter while setting up

the project and how to resolve them:

1. Python Version Issue

Problem: If the python --version command shows a version lower than Python 3, the application might not run as expected.
Solution: Download and install Python 3.x.

2. Pip Not Found

Problem: You might see an error saying "pip command not found."
Solution: Install pip by following the pip installation guide.

3. Node.js Missing

Problem: When trying to run npm install, you may get an error indicating Node.js is not installed.
Solution: Install Node.js from here.

4. Frontend Fails to Start (Port in Use)

Problem: If you get an error when starting the frontend (npm run dev) saying the port 3000 is already in use.
Solution: Either stop the application using port 3000 or specify a different port when running the command:
```
 npm run dev -- -p 3001
```

5. Backend Not Starting

Problem: If the backend fails to start, ensure that the entry point (python run_backend.py) is the correct file. You may also encounter errors if Python dependencies are missing.
Solution: Double-check the file names and ensure all required packages are installed using pip install -r requirements.txt.

For more information, visit the full app-authentication repository.

A Guide in Developing a Financial Dashboard in Next.js

Patrick Mwangi — Mon, 16 Sep 2024 13:17:48 +0000

Table of Content

Section	Description
Introduction	Overview of Next.js and its role in building full-stack web applications.
Creating the Next.js App	Instructions to start a new Next.js app with step-by-step guidance.
Project Structure	Description of the project folder structure and how each component fits into the overall architecture.
Setup Instructions	Steps to navigate to the project directory, install dependencies, and start the development server.
Dashboard Page	Details on the Dashboard page: displays key financial metrics, trends, and provides an overview of financial health.
Invoices Page	Features of the Invoices page: managing, viewing, and editing invoices, with real-time data fetching and API integration.
Authentication	Overview of using NextAuth.js for authentication, including session management and sign-in/sign-out functionality.
Advantages of Using Next.js	Highlights the benefits of using Next.js, including SSR, file-based routing, and built-in API routes.
Conclusion	A brief conclusion summarizing why Next.js is a strong choice for modern web development.

Next.js is a flexible React Framework that gives you building blocks to create fast, full-stack web applications. Let's spend some time expanding on what React and Next.js are and how they can help you build web applications.

Building Blocks of web application

User Interface - how users will consume and interact with your application.
Routing - how users navigate between different parts of the application
Data Fetching - where your data lives and how to get it
Rendering - when and where you render static or dynamic content

Setting up the Next.js Project

Before you start creating the project, you'll system will need to meet the following requirements:

Node.js 18.17.0 or later installed. Install Here
Operating Systems: macOS,Windows(including wsl) or Lunux
A Github Account and a Vercel Account

Installation
After installing all application and making sure your system meets all the requirements above, open your terminal app and run the following command

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

.
After the prompts for creating the next app, a folder will be created while installing the required dependecies.

After cloning the repository, navigate to the project directory by cd nextjs-dashboard and install any dependecies that your computer might not have by npm install then run the development server npm run dev. Open browser and go to http://localhost:3000

To start, we need certain essential pieces, which are special code files that allow us to perform specific tasks. We bring these components into our project by using keywords like "import" to include them in our code strucuture, similar to gathering ingredients for a recipe.

Once you navigate to the folder, you will notice the project has the following structure/app: Contains all the routes, components, and logic for your application, this is where you'll be mostly working from.
/app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions.
/app/ui: Contains all the UI components for your application, such as cards, tables, and forms. To save time, we've pre-styled these components for you.
/public: Contains all the static assets for your application, such as images.
Config Files: You'll also notice config files such as next.config.js

1. The Dashboard page of the Next.js financial dashboard offers a high-level overview of financial performance. It displays key metrics like total revenue, pending invoices and monthly trends using graphs and charts to visualize data over time.This allows users to track financial health at a glance. This page is designed for efficient monitoring and analysis of revenue streams, offering users quick insights into the status of their business finances.

2. The Invoices Page of the financial dashboard built with Next.js provides a streamlined interface for managing and viewing customer invoices. users can search for invoices, create new ones and view detailed information like customer name, email , invoice amount, date and payment status (e.g., "Paid" or "Pending"). The use of dynamic data fetching ensures real-time updates. The interface also offers options to edit or delete invoices leveraging the Next.js API routes for seamless interaction with the back-end database

NextAuth.js will be used to add authentication to the app. NextAuth.js abstracts away much of the complexity involved in managing sessions, sign-in and sign-out and other aspects of authentication. NextAuth.js simplifies the process, providing a unified solution for auth in Next.js applications.

Advantages of Using Next.js as a Framework

Server-Side Rendering (SSR) and Static Site Generation (SSG)

Next.js offers built-in support for SSR and SSG, which significantly improve the performance and SEO of web applications. SSR generates HTML on the server side for each request, while SSG pre-renders pages at build time, enhancing load times and user experience.
API Routes

Next.js allows developers to build full-stack applications by providing API routes. This feature eliminates the need for a separate backend server, as API endpoints can be created directly within the Next.js app, making development faster and more efficient.
Automatic Code Splitting

With automatic code splitting, Next.js ensures that only the necessary JavaScript for a specific page is loaded, reducing the initial load time and improving performance. This is done out of the box, with no extra configuration required.
File-Based Routing

Next.js uses a file-based routing system where the file structure of the pages directory maps directly to the URL structure. This simplifies routing setup, allowing developers to focus on building the application instead of configuring complex routing systems.
Built-In CSS and Sass Support

Next.js offers built-in support for CSS and Sass, allowing developers to import CSS files directly into their components. It also supports CSS modules, which help in avoiding global scope CSS conflicts and enable component-level styling.

Conclusion

Next.js is a versatile framework that provides a range of features such as server-side rendering, file-based routing, and API routes, making it an excellent choice for building modern web applications. Its focus on performance, ease of use, and flexibility makes it a preferred choice for many developers.

Forem: Patrick Mwangi

Tabiya Hackathon Project

AI Powered job seeking app

File Structure for Backend and Frontend:

Backend Code (Flask + Python)

app.py

config.py

models.py

routes.py

nlp_service.py

auth_service.py

database/db_init.py

requirements.txt

Frontend Code (React + JavaScript)

src/App.js

src/components/JobMatch.js

src/components/ChatBot.js

src/components/Dashboard.js

Run Instructions:

Updated Backend with Error Handling and Real-time Job Matching

1. Error Handling in Backend Services

services/nlp_service.py (Error handling added)

auth_service.py (Error handling added)

2. Real-time Job Matching with WebSockets

Add WebSocket Support to Backend

Install Flask-SocketIO:

Update app.py to support SocketIO:

3. Frontend Real-time Integration

Install socket.io-client for real-time communication:

Update JobMatch.js for real-time communication:

Updated Structure:

Instructions to Run:

Guide on Building a Full-Stack Authentication System with Python and Next.js

Guide on Building a Full-Stack Authentication System with Python and Next.js

Table of Contents

Overview

Core Features:

Key Technologies

Project Structure

Directory Breakdown

Setup Instructions (Beginner Friendly)

Authentication Flow

Authentication Flow Diagram

Common Debugging Issues

1. Python Version Issue

2. Pip Not Found

3. Node.js Missing

4. Frontend Fails to Start (Port in Use)

5. Backend Not Starting

A Guide in Developing a Financial Dashboard in Next.js

Advantages of Using Next.js as a Framework

Conclusion

`app.py`

`config.py`

`models.py`

`routes.py`

`nlp_service.py`

`auth_service.py`

`database/db_init.py`

`requirements.txt`

`src/App.js`

`src/components/JobMatch.js`

`src/components/ChatBot.js`

`src/components/Dashboard.js`

`services/nlp_service.py` (Error handling added)

`auth_service.py` (Error handling added)

Update `app.py` to support SocketIO:

Install `socket.io-client` for real-time communication:

Update `JobMatch.js` for real-time communication: