Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tquintal/call-to-consciousness

Portfolio website
https://github.com/tquintal/call-to-consciousness

nextauth nextjs prisma prisma-orm react reactjs trpc trpc-api

Last synced: about 1 month ago
JSON representation

Portfolio website

Awesome Lists containing this project

README 

        
# Project Introduction

## Portfolio Website

This project is a React/Next.js application created to serve as a portfolio website for my sister. It showcases her work and allows her to dynamically manage the content through an intuitive backoffice system.



### ✨ Key Features

- **Login System**: Secure access to the backoffice.

- **Dynamic Content Editing**: Allows efficient content updates.

- **Type-Safe API**: Ensures reliable communication between the front-end and back-end.

- **Responsive Design**: Provides a modern and adaptable layout.

- **Animations and Transitions**: Enhances user experience with smooth visual effects.



### 🏋️ Challenges Faced

One of the main challenges was managing forms in the backoffice, which includes functionalities to add, edit, and remove blocks of fields. Ensuring these operations are user-friendly and efficient required careful planning and implementation.



### 🏆 Achievements

- **Intuitive and Consistent Website**: Created an intuitive and consistent website that is easy to navigate.

- **Dynamic Content Management**: Developed a backoffice system that allows for dynamic management of all website content, making it easy for my sister to keep her portfolio up-to-date without technical assistance.



### 🏛️ Software Architecture

The project follows a layered architecture pattern to ensure maintainability, scalability, and separation of concerns. Here's an overview of the software architecture:

- **Presentation Layer**: The frontend is built using React/Next.js, following a component-based architecture. It handles user interaction and UI rendering, presenting data to users in a visually appealing manner.

- **Application Layer**: The application layer contains business logic and orchestrates interactions between the frontend and backend. It utilizes Next.js API routes and tRPC to define type-safe APIs for communication.

- **Data Access Layer**: Prisma ORM is used for interacting with the database, providing a type-safe and intuitive way to query and manipulate data. PostgreSQL is chosen as the database solution for its reliability and scalability.

- **Authentication and Authorization Layer**: Authentication is managed using NextAuth, supporting various authentication providers and ensuring secure access to the backoffice.

- **Styling and Animation Layer**: TailwindCSS is employed for styling the application, offering utility-first CSS classes for rapid UI development. Framer Motion is integrated for adding animations and transitions, enhancing the user experience.



### ⚙️ Technical Details

- **Next.js**: Utilized for server-side rendering and static site generation, improving performance and SEO.

- **NextAuth**: Implemented for secure and flexible authentication, supporting JWT and database sessions.

- **Prisma ORM**: Used for database interactions and data modeling, enabling type-safe queries and migrations.

- **tRPC**: Allows for the creation of type-safe APIs with minimal boilerplate, ensuring end-to-end type safety.

- **TailwindCSS**: Employed for utility-first CSS styling, allowing for rapid UI development and consistent design.

- **Framer Motion**: Integrated for declarative animations and transitions, enhancing the visual appeal and interactivity of the application.

- **React Hook Form**: Used for managing forms, ensuring robust form validation and state management.

- **PostgreSQL**: Chosen as the database for its reliability and powerful features, managed through Prisma.



🔗 [Visit](https://call-to-consciousness.com/)



## Screenshots

### Backoffice

![backoffice_1](/screenshots/backoffice_screen_1.png)

![backoffice_2](/screenshots/backoffice_screen_2.png)

![backoffice_3](/screenshots/backoffice_screen_3.png)

![backoffice_4](/screenshots/backoffice_screen_4.png)



### Website

![website_1](/screenshots/screenshot_1.png)

![website_1](/screenshots/screenshot_2.png)

![website_1](/screenshots/screenshot_3.png)

![website_1](/screenshots/screenshot_4.png)