PalitasPR Svelte Themes

Palitaspr

PalitasPR is a user-friendly platform that simplifies the process of finding and contracting services in Puerto Rico. We've designed a streamlined system that connects service providers with those seeking their expertise, making it easier than ever to find the perfect match for your needs.

PalitasPR

PalitasPR logo

Table of contents

Description

PalitasPR is a service requests - promotions platform born from the need of a fast and reliable services system. We all know that finding jobs/services online as a contractor or as a person who needs to contract a servicer it's a difficult task. Between almost-dead platforms and the congestion that we can find in social media, everyday, searching or promoting a service gets more difficult. Our team worked with multiple technologies to bring you the best user experience.

  • The frontend is made with the Javascript framework Svelte, the CSS framework TailwindCSS, the UI library DaisyUI and Vite as the builder/bundler.
  • The backend is made with Python and the web framework Flask.
  • The database is made in PostgreSQL and loaded into our cloud service.
  • The cloud service we use is AWS.

All of this tools and technologies together, make our app efficient, functional and fast.

Usage

Frontend

Svelte installation using Vite

npm create vite@latest <project-name>

TailwindCSS Installation

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

TailwindCSS Config

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Global CSS Tailwind imports
@tailwind base;
@tailwind components;
@tailwind utilities;

DaisyUI Installation

npm i -D daisyui@latest

DaisyUI Config

module.exports = {
  //...
  plugins: [
    require('daisyui'),
  ],
}

Running the project

npm run dev # runs the project in development mode

Backend

Main App

The Main App is the core of our platform, utilizing the Flask framework for a seamless connection between the frontend and backend. It features a modular blueprint structure for organized routing and API management. With SQLAlchemy and PostgreSQL, we handle data efficiently, supporting C.R.U.D. operations and custom queries. The application serves static files, including Svelte-generated JavaScript and CSS, ensuring a dynamic user interface. AWS S3 integration allows secure image uploads and retrievals. Key components include app.py for app initialization, base_model.py and models.py for database schema, console.py for command-line database operations, and emails.py for managing email communications. This setup ensures a robust and scalable backend infrastructure.

SQLAlchemy and Postgres

Our application relies on SQLAlchemy, an ORM (Object-Relational Mapping) tool, to interact with our PostgreSQL database efficiently. SQLAlchemy simplifies database operations by mapping Python objects to database tables and handling queries through Python methods.

While SQLAlchemy encourages using relationships defined in models for data retrieval, we occasionally opt for custom SQL queries executed directly from the database session. This approach allows us to optimize performance for specific queries that may be more efficient when tailored directly to our database schema and requirements.

Database Operations are managed through the db folder, organized based on class models and standard CRUD operations. We use SQLAlchemy as our ORM tool to map Python objects to PostgreSQL tables. While ORM relationships are used for typical data retrieval, custom SQL queries are employed for performance optimization in specific scenarios.

DB Operations Classes The following classes manage various aspects of database interactions:

  • DBOperations: General database operations.
  • Db_promotion: Operations related to promotions.
  • Db_user: User-related operations, including login and signup.
  • Db_core: Core operations like search and filtering.
  • Db_task: Task management operations.
  • Db_review: Review management operations.
  • Db_promo_towns: Promotion town mappings.
  • Db_request_towns: Request town mappings.
  • Db_initial_contact: Initial contact operations.
  • Db_request: Request management operations.

These classes encapsulate the logic for interacting with the database, ensuring a clean separation of concerns and making the codebase easier to maintain and extend.

This hybrid approach ensures flexibility in managing our database interactions, balancing the convenience of ORM with the performance benefits of custom SQL queries where necessary.

S3 Bucket With the App

Our application seamlessly integrates with AWS S3 for managing pictures. When uploading or retrieving pictures, we leverage Boto3, the AWS SDK for Python, to interact with our S3 bucket. For uploads, the app sends requests to S3, storing pictures securely in the cloud. When retrieving pictures, we generate presigned URLs using Boto3, granting temporary access to specific objects in our S3 bucket. These presigned URLs are then provided to the frontend, enabling clients to fetch and display pictures dynamically. This approach ensures efficient storage, retrieval, and display of images while maintaining security and scalability.

Backend Files Structure

Folders & Files Content
api_blueprints Routes and blueprints for main flask app.py
api_documentation Routes documentation
db Db operation files based on class model and regular C.R.U.D for database
email_template Template for email visual structure sent on confimation email
static Files to serve from the frontend build via flask
app.py Main Flask Aplication
aws_bucket.py S3 bucket related functions
base_model.py Base model for all models
models.py All models represeting tables on database
console.py Testing console for the app
emails.py Functions related to emails

Cloud

Deployment

How is it Deployed?

Our deployment strategy revolves around leveraging AWS services for robust and scalable hosting. We've secured our domain, palitaspr.com, using Amazon Route 53 and obtained an SSL/TLS certificate from AWS Certificate Manager (ACM). This certificate ensures secure communication over HTTPS.

The core of our infrastructure is managed by an Elastic Load Balancer (ELB), which distributes incoming traffic across multiple EC2 instances, but in the case of this demo project only to one. These instances are configured with a Linux server environment running Gunicorn and Nginx. Gunicorn serves as the WSGI server, handling Python web application requests the main app.py, while Nginx acts as a reverse proxy server, enhancing performance by caching and serving static content.

Our ELB is configured to target a group of EC2 instances, where listeners on ports 80 (HTTP) and 443 (HTTPS) are redirected to our palitaspr.com EC2 instance.

Cloud Files Structure

AWS Instance Usage
RDS Hosting Postgres Database
EC2 Virtual machine using linux with gunicorn and nginx to run server
ELB Load balancer to redirect traffic from http and https into EC2 intance
S3 Bucket for handling pictures of the app and its users
Route-53 Used to obtain domain 'palitaspr.com'
ACM Certification(SSL) from ACM to use https safely in our load balancer'

Screenshots

Service details

Profile page

Learn more about the project


Take a look at our landing page and learn more about PalitasPR!


Credits

Members Roles Links
Antonio de Jesus Database Manager
Jonathan Perez Frontend-Mobile Developer
Livan Hernandez Frontend Developer
Louis Toro Backend Developer
Luis Santiago Lead Developer


Back to top ↑

Top categories

Loading Svelte Themes