{"id":25271360,"url":"https://github.com/andoniat/personal-page-app","last_synced_at":"2025-04-06T07:17:26.167Z","repository":{"id":275186846,"uuid":"775682166","full_name":"AndoniAT/Personal-Page-App","owner":"AndoniAT","description":"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.).","archived":false,"fork":false,"pushed_at":"2025-01-31T18:08:51.000Z","size":13475,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T12:46:12.116Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mypersonalresume.vercel.app/resumes/AndoniAT","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndoniAT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-21T21:00:18.000Z","updated_at":"2025-01-31T18:11:54.000Z","dependencies_parsed_at":"2025-01-31T18:47:26.840Z","dependency_job_id":null,"html_url":"https://github.com/AndoniAT/Personal-Page-App","commit_stats":null,"previous_names":["andoniat/personal-page-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FPersonal-Page-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FPersonal-Page-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FPersonal-Page-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FPersonal-Page-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndoniAT","download_url":"https://codeload.github.com/AndoniAT/Personal-Page-App/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445683,"owners_count":20939961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-12T12:32:52.823Z","updated_at":"2025-04-06T07:17:26.146Z","avatar_url":"https://github.com/AndoniAT.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 class=\"text-center\" style=\"background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n padding: 5px;\"\u003e Resumes Social Network in NextJs + PostgreSQL + Vercel\n \u003cimg src=\"https://github.com/user-attachments/assets/0f0f9f25-769a-49f3-a68e-ae3f4a71748e\" width=\"100\"/\u003e\n \u003c/h1\u003e\n\u003ch4\u003eAuthor : Andoni ALONSO TORT\u003c/h4\u003e\n\n### React + NextJs + TypeScript + Vercel + PortgreSQL\n\n# [Visit the project in production](https://mypersonalresume.vercel.app/resumes/AndoniAT)\n\nAn application so that users can personalize their own resume.\n\nThis 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).\n\nThis 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.\n\nThe 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.\n\nWith a smooth user experience, an intuitive interface, and a secure architecture, this project provides a complete solution for creating, customizing, and sharing online content.\n\n## 🔒 Security \u0026 Authentication\n  - Secure authentication with NextAuth, ensuring reliable session management.\n  - Route protection based on user roles: access is restricted according to defined permissions.\n  - Error handling with clear messages to inform the user.\n\n## 🛠️ Main Features\n### Profile Management \u0026 Social Network\n  - Each user has a personal profile, including an image gallery stored via UploadThing.\n  - Ability to search for and follow other users, creating a social network dynamic.\n  - Profile view, edit, and delete functionalities.\n\n### 📄 Responsive Web Page Editor\n  - Each user can create and customize their own responsive web page with five screen types: 2XL, XL, LG, MD, and Mobile.\n  - The profile serves as the default homepage, but multiple sections/pages can be added.\n  - Available elements on a page:\n    - Text\n    - Images\n    - Custom HTML content\n    - iFrame (e.g., YouTube)\n    - Each element can be visually customized through an intuitive interface, without the need to code in CSS.\n\n### 🔗 Navigation \u0026 User Experience\n  - Dynamic links to reference other elements or pages within the application.\n  - Skeleton loading with Suspense to enhance fluidity and prevent waiting times during data loading.\n  - Real-time error handling to guide users in case of issues with forms or data loading.\n\n### 🚀 Deployment \u0026 Technologies\n  - Front-end: Next.js (React)\n  - Back-end: RESTful API with PostgreSQL\n  - File Storage: UploadThing\n  - Hosting: Vercel\n\n## Getting Started\n\nRun the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen App in [http://localhost:3000](http://localhost:3000).\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n\u003cbr/\u003e\n\nDatabase 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.\n\nSeeding database structure and some initial data test with command: `npm run seed`\nTest code with lint: `npm run lint`\nBuild in production: `npm run build`\n\n\nFor 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`\n\nThen, in .env file, add the generated key to the AUTH_SECRET variable:\n\n`AUTH_SECRET=your-secret-key`\n\nNOTE : For auth to work in production, we'll need to update our environment variables in your Vercel project too.\n\n\u003chr/\u003e\n\n# Other project details\n\n## == 🏠 Home Page ==\n\nOn 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.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/a5755064-8d69-4298-9d8e-a8ee9a4db539\" width=\"500\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/8e035f32-d21c-4a46-aae8-c6642937785e\" width=\"500\"/\u003e\n\n\n\n## == 🔒 Login / Crreate Account ==\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/326ab5e7-dcce-424c-8018-095963cfe0f3\" width=\"500\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/7c5fc96a-3fd6-4399-8612-e539267e9218\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == 👨‍💻 Profile ==\n\nThe profile consists of several parts:\n  - Sections: All the sections that have been created; new ones can be added.\n  - View/Edit Button\n  - Image Gallery\n  - Styles\n  - Section Content\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/5ff523dc-0614-4987-9669-0ce62492f2d3\" width=\"500\"/\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/26fe6448-7152-454b-8cdf-20c4787062a2\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n### ✅ Create Elements\n\nTo create an element, simply select the blocks you want to merge, choose the type of element you want to create, and define the content.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/de35d75c-d72c-4219-802d-481629b66d67\" width=\"500\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/1623a361-a03f-4cd7-9228-c26eaec9f145\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n\u003cb\u003e⛰️Image element\u003c/b\u003e\n\nTo create an image, simply select one from your gallery. It will be displayed automatically. New images can also be added.\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/f70fd92b-d5a2-44e8-b978-fa76009aecdd\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n\u003cb\u003e\u003c💻/\u003e HTML element\u003c/b\u003e\n\nIf you want a more customizable element, you can also add your own HTML styles and apply any styles you like.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/cd44afbc-c9e8-4eec-b681-1199801910b8\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n\u003cb\u003e⛓️‍💥 Reference element\u003c/b\u003e\n\nA window displaying all your elements by type will appear, allowing you to select the reference element.\nYou can also create a new element from an existing one to copy its content and styles instead of recreating it multiple times.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/0196ba2e-4b7d-4f77-abaf-be16feac8729\" width=\"500\"/\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\u003cb\u003e👁️ Displays \u003c/b\u003e\n\nYou can customize the appearance based on the screen size.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/09d8bcda-fb4c-427d-9ab6-c1bd1d55196e\" width=500\"/\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/59b1f960-2a33-4671-b8da-c9326c3f58dd\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n### ✏️ Modify Elements\n\nWhen 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.\n\nAll changes are made in real-time, allowing the user to see the site's appearance instantly. 🕛\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/0d6440c9-6bba-4374-b511-aacb81d53339\" width=\"500\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/9671bd69-d798-41f1-bb7c-55c301272ced\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n### 🤝 Follow Accounts\n\nThe application includes a social network feature. You can access other users' profiles and follow them.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/5dc13cc9-279b-47c5-95ff-ae028449a8cf\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n\u003chr/\u003e\n\u003ch5\u003eAuthor: \u003ci\u003eAndoni ALONSO TORT\u003c/i\u003e\u003ch5\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandoniat%2Fpersonal-page-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandoniat%2Fpersonal-page-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandoniat%2Fpersonal-page-app/lists"}