Vertin Intern Project - Personal Portfolio

📑 Table of Contents

• Project Overview
• Tech Stack
• Project Structure
• Installation & Running
• Features
• API Documentation
• Development Guidelines
• Contributing
• License

Project Overview

This is a personal portfolio project developed during an internship at Vertin from January to March 2025. The application showcases the intern's profile, memorable experiences, learning outcomes, and engineering topics of interest.

Tech Stack

Frontend

• React.js with Vite
• TailwindCSS for styling
• Material UI components
• React Router for navigation
• Axios for API requests
• FontAwesome icons
• Typewriter Effect for dynamic text

Backend

• Node.js
• Express.js
• RESTful API architecture
• CORS handling

Project Structure

├── backend/ # Backend code
│   └── server.js # Main Express server file
│
├── frontend/ # Frontend code
│   ├── public/ # Public assets (images, icons, etc.)
│   ├── src/
│   │   ├── assets/
│   │   ├── components/ # Reusable React components
│   │   ├── pages/ # React pages for each section
│   │   ├── theme/
│   │   ├── App.jsx # Main entry point of the React app
│   │   ├── index.css
│   │   └── main.jsx
│   └── package.json # Frontend dependencies
│
├── .gitignore # Git ignore file (node_modules, etc.)
├── README.md # Project description and instructions
├── package.json # Root package file for managing dependencies
└── tests/ # Folder for testing files (unit, integration tests)

Installation & Running

Prerequisites

• Node.js (version 16.x or higher)
• npm (version 7.x or higher)
• Git

Environment Setup

Create .env files for different environments:

# For development (frontend/.env.development)
VITE_API_URL=http://localhost:3001

# For production (frontend/.env.production)
VITE_API_URL=https://your-production-api.com

Getting Started

# Clone the repository
git clone https://gitlab.ebram.org/training-team/2025_jan-march_vertin_intern_programmer.git

# Navigate to project directory
cd 2025_jan-march_vertin_intern_programmer

# Install dependencies for both frontend and backend
npm run post-install

# Start both frontend and backend concurrently
npm start

The application will start with:

• Frontend: http://localhost:5173 (or another port if 5173 is in use)
• Backend: http://localhost:3001

Development Mode

If you want to run the frontend and backend separately during development:

Frontend Only

cd frontend
npm install
npm run dev

Backend Only

cd backend
npm install
npm run dev

API Documentation

Endpoints

• GET /api/resource - Retrieve resource
• POST /api/resource - Create resource

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request