Skip to content

BeaRobledillo/Friendzone-Frontend

Repository files navigation

FriendCity by Beta Team (Pedagogical Project) 🏨 👪

🏡 👦 👧

alt Friendcity

Project Idea: 💡

~~ An app to manage and plan different types of events between groups of friends (birthdays, meetings, get-togethers, etc...), in which you can invite friends and specify the date, time, place and all the necessary information to plan the event. ~~

=======

Idea de Proyecto: 💡

~~ Una app para gestionar y planificar diferentes tipos de eventos entre grupos de amigos (cumpleaños, reuniones, quedadas, etc…), en la cual puedes invitar a amigos y concretar la fecha, hora, sitio y toda la información necesaria para planificar el evento. ~~

Requeriments: 📑

:octocat: Our Repositories:

FriendCity Frontend - FriendCity Frontend

FriendCity Backend - FriendCity Backend

Design: ✏️

Click Design 👀

DataBase Design 🔑

alt BBDD

WIREFRAME 🔍

alt WIREFRAME

MOCKUP 📐

alt mockup alt mockup

🎨 Color Palette:

Suitable for color blind people.

Click to see the color palette 👀

Principal Color

alt PrincipalColor

alt Colors

Functionalities: 💾

📍 Minimum Viable Product (MVP): ✌️

  • Sign up / Registrarse. 🆔 🔒
  • Log in / Loguearse. 👍 🔓
  • Log out / Cerrar Sesión. ⛔
  • CRUD Events:
    • Add or Create Events / Añadir o Crear Eventos.
    • See or Read Events in a Calendar / Ver o Leer Eventos en un Calendario. 📅
    • Modify or Edit Events (All group members will be able to edit) / Modificar o Editar Eventos (Todos los miembros del grupo podrán editar).
    • Delete Events (Solo el creador del evento podrá eliminar) / Eliminar Eventos (Only the creator of the event can delete). 🔐
  • Receive event invitations by email / Recibir invitaciones de los eventos por email. 📫

📍 Future Extras: ➕

  • Make groups of friends / Hacer Grupos de amigos.
  • Password recovery button / Botón de recuperar la contraseña. 🔜
  • Add Payment Platform / Añadir Plataforma de pago. 💳

💻 Technologies: 💻

  • Git / Github - Git version control system.
  • Java - Programming Language.
  • JavaScript - Programming Language.
  • Spring Boot - Java programming language framework
  • Spring Data JPA - Simplify data persistence for the developer against different information repositories.
  • Spring Security - Java / Java EE framework that provides authentication, authorization and other security features for applications.
  • MySQL - Relational database management system.

Tools: 🔨

  • Trello - Project Organization. Agile Methodology. User stories.
  • Balsamiq - Wireframe.
  • Figma - Design.
  • Canva - Simplified Graphic Design.
  • XAMPP - MySQL database management system and Apache web server.
  • PhpMyAdmin - MySQL Administration through web pages, using a web browser.
  • Visual Studio Code - Code Editor.
  • IntelliJ IDEA - IDE (Integrated Development Environment)

Frameworks: 📚

  • Angular - Framework for web applications developed in open source TypeScript.
  • Bootstrap - Cross-platform library or open source toolkit for web site and application design.

ScreenShoots: 📷

Click here to see the Pages 👀

Landing Page + Login 📟

alt LandingPage

Register ®️

alt Register

Home 🏴‍☠️

alt Events

Calendar 📆

alt Calendar

Create Event 🏴‍☠️

alt CreateEvent

One Event 🏴‍☠️

alt OneEvent

Contact 📧

alt Contact

About the Team ⭐

alt Team

✨ About the team:

We are a group of friends and enthusiastic coders. We like to hang out with each other and never miss an opportunity to plan get-togethers and parties.

However, on many occasions we have had problems in agreeing on dates, places or what to bring.

One day, we wondered how we could organize ourselves better. Hence the idea of FriendCity was born, an app that allows you to plan meetings between friends. From your closest contacts you can: invite your friends, find and set addresses where to meet, decide who is going to bring the items.

Planning - Methodology - Kanban : 🚩

Click methodology 👀

alt Trello

We use the Scrum methodology to carry out the project.

We have a Scrum Master and a Product Owner.

We work collaboratively to improve our organization.

We do dailies and retros every day.

We set tasks by sprints with attainable objectives

and in order to achieve the delivery of the project on time.

We work with branches and make small commits, to organize the work and tasks properly.

Authors: ✒️

🔨 Resources:

Visit https://www.tutorialspoint.com/html5/index.htm - HTML5

Visit https://www.tutorialspoint.com/css/css3_tutorial.htm - CSS3

Visit https://www.javascript.com - JavaScript

Visit https://angular.io/ - Angular

Visit https://www.typescriptlang.org - TypeScript

Visit https://git-scm.com/ - Git

Visit https://nodejs.org/en/ - NodeJS

Visit https://www.npmjs.com/ - npm

Visit https://www.apachefriends.org/download.html - XAMPP

Visit https://www.mysql.com - MySQL

Visit https://getbootstrap.com - Bootstrap

Visit https://www.phpmyadmin.net - PhpMyAdmin

Apis and libraries used in the project: 📚

Angular Google Maps (AGM) -- https://angular-maps.com/guides/getting-started

FullCalendar -- https://fullcalendar.io

MailThis -- https://mailthis.to

Java Mail APIhttps - https://www.oracle.com/java/technologies/javamail-api.html

FriendzoneFrontend

This project was generated with Angular CLI version 13.3.6.

Development server 📖

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding 📖

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build 📔

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

License ©️

⚠️ This project is licensed under creative commons

FriendCity License Frontend

FriendCity License Backend

=======

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Greetings: 🎁

  • Comment your friends and colleagues about this project. 📢
  • Thank the team. 🙂
  • Invite the team for a beer. 🍺 or a coffee ☕ .