Developed by: Marcelo Manara & Lucas Vieira

Welcome to the TechON repository, a robust web application designed to showcase and manage 360° virtual tours, real estate photography, and Matterport projects.

This project was built using MVC (Model-View-Controller) architecture with TypeScript and Node.js, focusing on modern development practices, high security standards, and containerization.

The Problem: Real estate and photography businesses often lack an organized, secure, and professional way to present complex 360° digital assets to clients while managing lead inquiries and administrative access.

The Solution: A centralized management platform. TechON provides a sleek frontend for clients and a secure administrative backend. It implements industrial-strength authentication (JWT via HttpOnly Cookies) and a dedicated lead management system, all wrapped in a scalable Dockerized environment.

Technical Challenges:

• Secure State Management: Implementing JWT authentication stored in HttpOnly Cookies to mitigate XSS (Cross-Site Scripting) attacks, a significant upgrade over standard LocalStorage methods.
• Robust Testing: Achieving 100% code coverage on critical controllers using Jest, ensuring the business logic and authentication flows are bug-free before deployment.
• Environment Parity: Using Docker to ensure the application runs identically across development, testing, and production environments, eliminating "it works on my machine" issues.

1. Technologies Used
2. Prerequisites
3. Initial Setup
4. Running the Project
5. Authentication & Security Features
6. Automated Testing (Jest)
7. Project Structure
8. Contact

• Backend: Node.js, Express (TypeScript)
• Frontend: EJS (View Engine), Bootstrap 5
• Database: SQLite (via Sequelize ORM)
• Security: BCrypt (Password Hashing), JWT (Authentication via Cookies)
• Testing: Jest (Code coverage > 90%)
• Containerization: Docker

Before starting, ensure you have installed:

• Node.js (v18 or higher)
• Docker (Optional, for containerized execution)

1. Clone the repository:

git clone [https://github.com/ManaraMarcelo/techon-virtual-tours-platform.git](https://github.com/ManaraMarcelo/techon-virtual-tours-platform.git)
cd techon-virtual-tours-platform

2. Install dependencies:

npm install

3. Configure Environment Variables: Create a .env file in the root directory and add your JWT secret:

JWT_SECRET=your_super_secure_secret_here

Run the project with live-reload:

npm run dev

Access at: http://localhost:3000

To run the built application in an isolated container:

1. Build the image:

docker build -t techon-app .

2. Run the container:

docker run -p 3000:3000 techon-app

Access at: http://localhost:3000

The system implements a complete professional authentication flow:

• Passwords are encrypted using BCrypt before database storage.
• Login generates a JWT Token stored in a secure httpOnly cookie, preventing access via frontend scripts.

As this is an academic project not connected to an SMTP server (like SendGrid), the recovery code is simulated:

1. Click "Forgot password?" on the Login screen.
2. Enter a registered email.
3. Check your Terminal/Docker logs to find the recovery code:

==================================================
>>> PASSWORD RECOVERY <<<
>>> User: [email protected]
>>> CODE: 123456
==================================================

4. Enter the code in the browser modal to reset your password.

The /messages route is protected and displays form inquiries.

• Access Control: Only authorized admin emails (defined in Middleware) can access this area. Unauthorized users are redirected with an "Access Denied" alert.

The project features comprehensive unit tests for Page and Auth Controllers.

To run tests and generate a coverage report:

npm run test:coverage

Current status: 100% coverage on core logic files.

• config/: Database configuration (Sequelize).
• controllers/: Core business logic (Auth and Pages).
• models/: Database models (User, Message).
• middlewares/: Token verification and admin permissions.
• routes/: API route definitions.
• views/: EJS files (Dynamic HTML) and Partials.
• public/: Static assets (CSS, Images, Client-side JS).
• tests/: Unit tests with Jest.

Marcelo Manara LinkedIn | Portfolio