https://github.com/andoniat/personal-page-app

This project is a modern web application developed with Next.js and deployed on Vercel, combining profile management, web page customization, and social features. It allows users to create and personalize their own responsive website, add interactive content (text, images, HTML, YouTube videos, etc.).
https://github.com/andoniat/personal-page-app

Last synced: over 1 year ago
JSON representation

This project is a modern web application developed with Next.js and deployed on Vercel, combining profile management, web page customization, and social features. It allows users to create and personalize their own responsive website, add interactive content (text, images, HTML, YouTube videos, etc.).

• Host: GitHub
• URL: https://github.com/andoniat/personal-page-app
• Owner: AndoniAT
• License: apache-2.0
• Created: 2024-03-21T21:00:18.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2025-01-31T18:08:51.000Z (over 1 year ago)
• Last Synced: 2025-02-12T12:46:12.116Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://mypersonalresume.vercel.app/resumes/AndoniAT
• Size: 12.9 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
 Resumes Social Network in NextJs + PostgreSQL + Vercel

 

 

Author : Andoni ALONSO TORT


### React + NextJs + TypeScript + Vercel + PortgreSQL

# [Visit the project in production](https://mypersonalresume.vercel.app/resumes/AndoniAT)

An application so that users can personalize their own resume.

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

This project is a modern web application developed with Next.js and deployed on Vercel, combining profile management, web page customization, and social features. It allows users to create and personalize their own responsive website, add interactive content (text, images, HTML, YouTube videos, etc.), and easily manage styling through a visual interface without coding.

The application features secure authentication with NextAuth, advanced role and permission management, and an image storage system using UploadThing. Each user can search for and follow other profiles, turning the application into an interactive social network.

With a smooth user experience, an intuitive interface, and a secure architecture, this project provides a complete solution for creating, customizing, and sharing online content.

## 🔒 Security & Authentication

  - Secure authentication with NextAuth, ensuring reliable session management.

  - Route protection based on user roles: access is restricted according to defined permissions.

  - Error handling with clear messages to inform the user.

## 🛠️ Main Features

### Profile Management & Social Network

  - Each user has a personal profile, including an image gallery stored via UploadThing.

  - Ability to search for and follow other users, creating a social network dynamic.

  - Profile view, edit, and delete functionalities.

### 📄 Responsive Web Page Editor

  - Each user can create and customize their own responsive web page with five screen types: 2XL, XL, LG, MD, and Mobile.

  - The profile serves as the default homepage, but multiple sections/pages can be added.

  - Available elements on a page:

    - Text

    - Images

    - Custom HTML content

    - iFrame (e.g., YouTube)

    - Each element can be visually customized through an intuitive interface, without the need to code in CSS.

### 🔗 Navigation & User Experience

  - Dynamic links to reference other elements or pages within the application.

  - Skeleton loading with Suspense to enhance fluidity and prevent waiting times during data loading.

  - Real-time error handling to guide users in case of issues with forms or data loading.

### 🚀 Deployment & Technologies

  - Front-end: Next.js (React)

  - Back-end: RESTful API with PostgreSQL

  - File Storage: UploadThing

  - Hosting: Vercel

## Getting Started

Run the development server:

```bash

npm run dev

# or

yarn dev

# or

pnpm dev

# or

bun dev

```

Open App in [http://localhost:3000](http://localhost:3000).

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.




Database has been created with [vercel](./https://vercel.com), you have to create a new postgres database and fill your .env file corresponding with your db credentials in vercel.

Seeding database structure and some initial data test with command: `npm run seed`

Test code with lint: `npm run lint`

Build in production: `npm run build`

For the login, we need to generate a secret key for the application. This key is used to encrypt cookies, ensuring the security of user sessions. Run the following command : `openssl rand -base64 32`

Then, in .env file, add the generated key to the AUTH_SECRET variable:

`AUTH_SECRET=your-secret-key`

NOTE : For auth to work in production, we'll need to update our environment variables in your Vercel project too.



# Other project details

## == 🏠 Home Page ==

On the homepage, there will be a brief presentation of the application. There is also a left-side navbar with login and account creation buttons. This menu can be hidden using the arrow in the middle to view the page in full.



  

  


## == 🔒 Login / Crreate Account ==



  

  



## == 👨‍💻 Profile ==

The profile consists of several parts:

  - Sections: All the sections that have been created; new ones can be added.

  - View/Edit Button

  - Image Gallery

  - Styles

  - Section Content



    

    



### ✅ Create Elements

To create an element, simply select the blocks you want to merge, choose the type of element you want to create, and define the content.



  

  



⛰️Image element

To create an image, simply select one from your gallery. It will be displayed automatically. New images can also be added.



  



<💻/> HTML element

If you want a more customizable element, you can also add your own HTML styles and apply any styles you like.



  



⛓️‍💥 Reference element

A window displaying all your elements by type will appear, allowing you to select the reference element.

You can also create a new element from an existing one to copy its content and styles instead of recreating it multiple times.



  






👁️ Displays 

You can customize the appearance based on the screen size.



   

   



### ✏️ Modify Elements

When selecting an element, a modification window will appear. You can edit any styles you want or add a link to make the element clickable. On the bottom you'll find a button tu delete the element.

All changes are made in real-time, allowing the user to see the site's appearance instantly. 🕛



  

  



### 🤝 Follow Accounts

The application includes a social network feature. You can access other users' profiles and follow them.



  





Author: Andoni ALONSO TORT