MewAtlas 🐱📸

Welcome to MewAtlas!

English version 🇺🇸🇬🇧

A social network dedicated to sharing cat photos, developed with a full-stack architecture that includes a backend in Java using Spring Boot, firebase and a web interface built with React and TypeScript. MewAtlas allows users to register, log in, and post photos of their cats.

This project is an exploration into full-stack development using Spring Boot, React, MySQL, and FireBase.

Project Structure

The project is organized into the following components:

• Frontend: Developed with React and TypeScript, handling user views, photo posting, and profile management.
• Backend: Implemented with Java 17+ and Spring Boot, providing RESTful endpoints for managing users and posts, googleAuth integrated witn firebase.
• Database: Uses MySQL to store user and post information, managed via JDBC instead of an ORM like Hibernate.

Features 🌟

• User Registration and Login: Users can create an account and access the platform.
• Post Creation: Users can upload photos of their cats with personalized descriptions.
• View Posts: All posts from registered users are visible.
• User Profile: Each user has access to their own profile.

API Endpoints 🐾

The MewAtlas API exposes the following endpoints:

Usage Examples

• Get all posts:

  curl -X GET "http://localhost:8080/api/cats"

• Create a new post:

  curl -X POST "http://localhost:8080/api/cats/post" + JSON

• Get posts from a specific user:

  curl -X GET "http://localhost:8080/api/users/pass"

Data Access and ORM

The backend uses JDBC as the main mechanism to interact with the database, handling SQL queries directly to achieve greater control over CRUD operations (Create, Read, Update, Delete).

Database Schema

The MewAtlas database contains the following tables:

Users Table:

id	name	email	password
1	Juan	[email protected]	******

Posts Table:

cat_id	Breed	color	age	image
1	My cat sleeping	https://my-cat-sleeping.com/image	2024-10-17	image

Web Application Usage 🖥️

Once the application is launched, users can navigate the interface to view the latest cat posts and create their own. Below are some key features:

• View all posts: When the app loads, all photos uploaded by users are displayed.
• Create a new post: From the interface, users can upload new photos with descriptions.
• View user profile: Each user can access their profile.

Example Usage

Google-Login

Log-In/Sign-Up

Log-out

Sign-Up

Log-In

Add Cat

SPANISH VERSION 🇪🇸

¡Bienvenidos a MewAtlas!
Una red social dedicada a compartir fotos de gatos, desarrollada con una arquitectura full stack que incluye un backend en Java usando Spring Boot, FireBase y una interfaz web en React con TypeScript. CatShare permite a los usuarios registrarse, iniciar sesión, y publicar fotos de sus gatos.

Este proyecto es una incursion en el desarrollo full stack utilizando Spring Boot, React MySQL, y Firebase

Estructura del Proyecto

El proyecto está organizado en los siguientes componentes:

• Frontend: Desarrollado con React y TypeScript, el cual maneja las vistas de los usuarios, publicación de fotos y gestión del perfil.
• Backend: Implementado con Java 17+ y Spring Boot, proporcionando endpoints RESTful que permiten la gestión de usuarios y publicaciones, googleAuth imtegrado con firebase.
• Base de Datos: Utiliza MySQL para almacenar la información de los usuarios y publicaciones, gestionada a través de JDBC en lugar de un ORM como Hibernate.

Funcionalidades 🌟

• Registro y Login de Usuarios: Los usuarios pueden crear una cuenta y acceder a la plataforma.
• Creación de Publicaciones: Los usuarios pueden subir fotos de sus gatos con descripciones personalizadas.
• Ver publicaciones: Se pueden ver todas las publicaciones realizadas por los usuarios registrados.
• Perfil de Usuario: Cada usuario tiene acceso a su propio perfil.

Endpoints de la API 🐾

La API de CatShare expone los siguientes endpoints:

Ejemplos de Uso

• Obtener todas las publicaciones:

  curl -X GET "http://localhost:8080/api/cats"

• Crear una nueva publicación:

  curl -X POST "http://localhost:8080/api/cats/post" + JSON

• Obtener publicaciones de un usuario específico:

  curl -X GET "http://localhost:8080/api/users/pass"

Acceso a Datos y ORM

El backend utiliza JDBC como mecanismo principal para interactuar con la base de datos, manejando consultas SQL directamente para lograr un control más detallado sobre las operaciones de CRUD (Crear, Leer, Actualizar y Eliminar).

Esquema de Base de Datos

La base de datos de MewAtlas cuenta con las siguientes tablas:

Tabla de Usuarios:

id	nombre	email	password
1	Juan	[email protected]	******

Tabla de Publicaciones:

cat_id	Breed	color	age	image
1	Mi gato durmiendo	https://mi-gato-durmiendo.com/imagen	2024-10-17	image

Uso de la Aplicación Web 🖥️

Una vez lanzada la aplicación, los usuarios pueden navegar por la interfaz para ver las publicaciones más recientes de gatos y realizar sus propias publicaciones. A continuación algunas funcionalidades clave:

• Ver todas las publicaciones: Al cargar la aplicación, se muestran todas las fotos subidas por los usuarios.
• Crear una nueva publicación: Desde la interfaz, los usuarios pueden subir nuevas fotos con descripciones.
• Ver perfil de usuario: Cada usuario puede acceder a su perfil.