Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geekelo/passlink_user_frontend
A react application for an event checkin application inspired by an hackathon event by Backdrop Labs
https://github.com/geekelo/passlink_user_frontend
css javascript react-hooks react-router reactjs
Last synced: 15 days ago
JSON representation
A react application for an event checkin application inspired by an hackathon event by Backdrop Labs
- Host: GitHub
- URL: https://github.com/geekelo/passlink_user_frontend
- Owner: geekelo
- Created: 2024-04-28T22:39:20.000Z (8 months ago)
- Default Branch: homepage/info
- Last Pushed: 2024-05-19T11:27:49.000Z (8 months ago)
- Last Synced: 2024-11-01T13:03:23.340Z (2 months ago)
- Topics: css, javascript, react-hooks, react-router, reactjs
- Language: JavaScript
- Homepage: https://passlink-user-frontend.vercel.app
- Size: 665 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
PASSLINK
# 📗 Table of Contents
- [📗 Table of Contents](#-table-of-contents)
- [📖 PERSONAL INVENTORY ](#-personal-inventory-)
- [Live demo](#live-demo)
- [Video Presentation](#video-presentation-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [🛠 Development Process ](#development-process)
- [💻 Getting Started ](#-getting-started-)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [👥 Authors ](#-authors-)
- [🔭 Future Features ](#-future-features-)
- [🤝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [📝 License ](#-license-)
# 📖 PassLink Landing Page/Area
"**PassLink** is an event check-in application built with React on the frontend and Ruby on Rails for the backend. It is designed to streamline the event check-in process, providing organizers and attendees with a seamless and efficient experience. Below, I'll outline the key aspects of PassLink, including its description, tech stack, development process, features, and how event check-ins are managed."
## Real-time Event Check-In:
PassLink simplifies the event check-in process by leveraging modern web technologies to provide real-time check-in capabilities. Here's a simplified explanation of how it works:
**Frontend Interaction:** When an attendee arrives at an event, they can use the PassLink app on their mobile device or desktop browser to check in. The React frontend captures the check-in request and sends it to the backend server for processing.
**Backend Processing:** The Ruby on Rails backend receives the check-in request, verifies the attendee's credentials, and updates the event attendance records in the database. It then sends a response back to the frontend to confirm the successful check-in.
**Real-time Updates:** The frontend receives the confirmation response from the backend and updates the user interface to reflect the attendee's check-in status in real-time.
## Live Demo & Presentation
[LIVE DEMO](passlink.geekelo.com.ng)
## Video Presentation
[See Video](https://youtu.be/j_N5vON7X6U)
## File Structure
PassLink utilizes a modern tech stack to ensure reliability, scalability, and performance. Some of the technologies and frameworks used in its development include:
**Frontend:** React, HTML, CSS, JavaScript
**Backend:** Ruby on Rails for server-side logic and API endpoints
**Database:** PostgreSQL or MySQL for storing event data and attendee information
- **Real-time Event Check-In:** Provides attendees with a seamless check-in experience, updating event attendance records in real-time.
- **Efficient Backend Processing:** Utilizes Ruby on Rails backend to efficiently process check-in requests and manage event data.
- **Responsive User Interface:** Built with React to ensure a responsive and intuitive user interface across devices and screen sizes.
- **Secure Authentication:** Implements secure authentication mechanisms to verify attendee credentials and prevent unauthorized access.
- **Customizable Event Pages:** Allows event organizers to customize event pages with branding, logos, and event details.
The development of PassLink followed a structured process that involved:
- **Requirements Gathering:** Understanding the requirements of the project by studying project materials and conducting stakeholder interviews.
- **Design and Prototyping:** Creating wireframes and prototypes to visualize the user interface and interactions.
- **Development:**
- Writing clean and modular code using React for the frontend and Ruby on Rails for the
backend.
- Implementing features iteratively and conducting thorough testing at each stage of development.
- **Testing:** Conducting unit tests, integration tests, and end-to-end tests to ensure the reliability and stability of the application.
- **Deployment:** Deploying the application to a production environment, configuring servers, and optimizing performance.
- **Monitoring and Maintenance:** Monitoring application performance, addressing bugs and issues, and implementing new features and updates as needed.
To get started with PassLink, follow these steps:
### Prerequisites
In order to run PassLink locally, you need:
- A code editor like Visual Studio Code
- Node.js and npm installed on your machine
- Ruby and Rails installed on your machine
### Setup
Clone this repository to your desired folder:
```sh
git clone https://github.com/geekelo/passlink.git
cd passlink
```
### Install
Install dependencies for both the project:
```sh
cd passlink_user_frontend
npm install
```
### Usage
To run the project locally, follow these steps:
1. Start the React development server:
```sh
cd passlink_user_frontend
npm start
```
3. Open your browser and navigate to `http://localhost:3000` to view the PassLink application.
### Run Tests
To run tests, run the following command:
```sh
cd passlink_user_frontend
rspec
```
👤 **Your Name**
- GitHub: [@githubhandle](https://github.com/your-username)
- Twitter: [@twitterhandle](https://twitter.com/your-twitter-handle)
- LinkedIn: [LinkedIn](https://linkedin.com/in/your-linkedin-profile)
- [ ] Implement user authentication and authorization features.
- [ ] Enhance analytics dashboard with additional visualizations and insights.
- [ ] Integrate third-party services for email notifications and event management.
- [ ] Add support for multiple languages and internationalization.
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/your-username/passlink/issues).
If you like PassLink, give it a ⭐️
Credit for icons; Fontawesome and Material icons
This project is [MIT](./MIT.md) licensed.