Skip to content

Xela url hackfest 2023 frontend service from the ScriptSquad team

Notifications You must be signed in to change notification settings

elmergustavo/hackfest-2023

Repository files navigation

Logo

Colitas: Pet adoption app



Why of the project

We have decided to create Colitas to support Quetzaltecos in the adoption process of dogs and cats, in order to reduce the amount of dogs and cats in street and abandonment situations.

  • 🚀 Colitas is designed to find our friend in a fun and interactive way.
  • 🐕 We focus on the problem of the high rate of homeless and abandoned animals in the city of Quetzaltenango.
  • 🐾 In this way we help shelters that no longer have space and prevent them from receiving or rescuing animals.

UX/UI design process

In this link you can go to see the figma file where you can find all the components, styles and screens of Colitas. Y por si quieres ver el prototipo puedes verlo aqui


Used technologies

Figma Next JS TailwindCSS Vercel


Features

  • Tailwind design
  • Tailwind animations and effects
  • Full responsiveness
  • Credential authentication
  • Google authentication
  • Github authentication
  • Image upload using Cloudinary CDN
  • Client form validation and handling using react-hook-form
  • Server error handling using react-toast
  • Page loading state
  • Empty page state
  • Booking/reservation system
  • Shareable URL filters
  • How to write POST and DELETE routes in route controllers (application/api)
  • How to handle files like error.tsx and loading.tsx, which are new Next 13 template files for unified loading and error handling.

Getting Started

This is a Next.js project bootstrapped with create-next-app.

Prerequisites

Node version 18.x

Clone the repository

https://github.com/elmergustavo/hackfest-2023

Install packages

npm install

Configure .env file

DATABASE_URL=""
NEXT_PUBLIC_SECRET=''
GITHUB_ID=''
GITHUB_SECRET=''
GOOGLE_CLIENT_ID=''
GOOGLE_CLIENT_SECRET=''
BACKEND_URL=''

Configure Prisma

npx prisma db push


Start the application

npm run dev

Start the application

Run commands with npm npm run [comando]

Command Description
dev Starts a development instance of the application

Contributors

The Colitas frontend was thanks to these wonderful people

About

Xela url hackfest 2023 frontend service from the ScriptSquad team

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published