https://github.com/coderanchel/mewatlas
A social network dedicated to sharing cat photos 🐈 , developed with a full-stack architecture that includes a backend in Java using Spring Boot and a web interface built with React and TypeScript. MewAtlas allows users to register, log in, and post photos of their cats.
https://github.com/coderanchel/mewatlas
firebase java react spring-boot typescript
Last synced: 2 months ago
JSON representation
A social network dedicated to sharing cat photos 🐈 , developed with a full-stack architecture that includes a backend in Java using Spring Boot and a web interface built with React and TypeScript. MewAtlas allows users to register, log in, and post photos of their cats.
- Host: GitHub
- URL: https://github.com/coderanchel/mewatlas
- Owner: CoderAnchel
- Created: 2024-10-17T21:31:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-01T22:49:05.000Z (over 1 year ago)
- Last Synced: 2025-03-15T16:10:58.405Z (over 1 year ago)
- Topics: firebase, java, react, spring-boot, typescript
- Language: TypeScript
- Homepage:
- Size: 339 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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**:
```bash
curl -X GET "http://localhost:8080/api/cats"
```
- **Create a new post**:
```bash
curl -X POST "http://localhost:8080/api/cats/post" + JSON
```
- **Get posts from a specific user**:
```bash
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 | juan@mail.com | ****** |
#### 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**:
```bash
curl -X GET "http://localhost:8080/api/cats"
```
- **Crear una nueva publicación**:
```bash
curl -X POST "http://localhost:8080/api/cats/post" + JSON
```
- **Obtener publicaciones de un usuario específico**:
```bash
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 | juan@mail.com | ****** |
#### 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.