Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/surgicaltube/unified-profile-platform
🚀 A modern React-based profile management platform featuring glassmorphism UI, Auth0 authentication, and GSAP animations. Streamline your professional profile management with our intuitive, secure solution.
https://github.com/surgicaltube/unified-profile-platform
auth0 authentication glassmorphism gsap javascript material-ui mui profile-management react react-router redux responsive-design state-management typescript user-interface
Last synced: 9 days ago
JSON representation
🚀 A modern React-based profile management platform featuring glassmorphism UI, Auth0 authentication, and GSAP animations. Streamline your professional profile management with our intuitive, secure solution.
- Host: GitHub
- URL: https://github.com/surgicaltube/unified-profile-platform
- Owner: SurgicalTube
- Created: 2024-10-04T19:59:10.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T20:23:58.000Z (2 months ago)
- Last Synced: 2024-12-29T17:48:08.352Z (9 days ago)
- Topics: auth0, authentication, glassmorphism, gsap, javascript, material-ui, mui, profile-management, react, react-router, redux, responsive-design, state-management, typescript, user-interface
- Language: JavaScript
- Homepage:
- Size: 1.58 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Unified Profile Platform
> **Note**: This project is currently a work in progress and may not be fully functional. Contributions are welcome!
## Overview
The **Unified Profile Platform** is an advanced React-based application that serves as a centralized solution for managing professional profiles and streamlining the job application process. It features a modern glassmorphism design, secure authentication through Auth0, and comprehensive profile management capabilities.
## Table of Contents
- [About the Project](#about-the-project)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Environment Variables](#environment-variables)
- [Running the Project](#running-the-project)
- [Project Structure](#project-structure)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
## 🌟 Key Features
### Profile Management
- **Multi-Document Support**: Upload and manage multiple versions of resumes, cover letters, and certifications
- **Profile Versioning**: Maintain different versions of profiles for various industries/roles
- **Real-time Updates**: Instant saving and synchronization of profile changes
- **Document Organization**: Structured storage and management of professional documents
### User Interface
- **Modern Design**: Implements glassmorphism design principles for a contemporary look
- **Responsive Layout**: Fully responsive design that works across all devices
- **Animated Interactions**: GSAP-powered animations for smooth user experience
- **Tab-based Navigation**: Organized content presentation through intuitive tabs
### Security & Authentication
- **Auth0 Integration**: Secure authentication and authorization
- **Protected Routes**: Role-based access control for sensitive areas
- **Secure Storage**: Encrypted local storage for user data
- **Session Management**: Robust session handling and persistence
## 🛠Technology Stack
### Frontend
- React 18.3.1
- Redux Toolkit for state management
- Material-UI (MUI) 6.1.2
- GSAP for animations
- React Router DOM 6.26.2
### State Management & Data
- Redux with Redux Toolkit
- Local Storage persistence
- Real-time state synchronization
### Styling & UI
- Custom CSS with glassmorphism effects
- Material-UI components
- GSAP animations
- Responsive design principles
### Authentication & Security
- Auth0 React SDK
- Protected routes implementation
- Secure session management
### 🚀 Getting Started
### Prerequisites
- Node.js (v14 or higher)
- npm or yarn
- Auth0 account and credentials
### Installation
1. Clone the repository:
```bash
git clone https://github.com/SurgicalTube/unified-profile-platform.git
cd unified-profile-platform
2. Install dependencies for both frontend and backend:
# For backend
cd backend
npm install
# For frontend
cd ../frontend
npm install
### Environment Variables
Create a .env file in both the backend and frontend directories, and add the following environment variables:
** Backend (backend/.env)
### MONGODB_URI= --> This Should be Set up on your own or set it up for this project
PORT=5001
AUTH0_DOMAIN= --> Again, set up on your own, I cant afford to keep this... If you have other open source options, please do them
AUTH0_CLIENT_ID=
AUTH0_CLIENT_SECRET=
**
### Frontend (frontend/.env)
NEXT_PUBLIC_AUTH0_DOMAIN=
NEXT_PUBLIC_AUTH0_CLIENT_ID=
Running the Project
1. Start the backend server:
cd backend
npm start
2. Start the frontend development server:
cd frontend
npm run dev
3. Visit http://localhost:3000 in your browser to view the frontend, and http://localhost:5001 to check the backend.
### Project Structure
unified-profile-platform/
├── backend/ # Node.js backend with Express and MongoDB connection
│ ├── db.js # Database connection file
│ ├── server.js # Main server file
│ └── .env # Environment variables for backend
├── frontend/ # Next.js frontend with React and Tailwind CSS
│ ├── pages/ # Next.js pages
│ ├── components/ # Reusable components
│ └── .env # Environment variables for frontend
├── README.md # Project documentation
└── .gitignore # Git ignore file
### Contributing
Contributions are welcome! Please follow these steps to contribute:
1. Fork the project.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a pull request.
### License
Distributed under the MIT License. See LICENSE for more information.
Project Link: https://github.com/SurgicalTube/unified-profile-platform