Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stephanvolynets/event-rsvp-app-mern
A RESTful, Modern, and Responsive Client sided React Application for managing event RSVPs with realtime updates and an intuitive user interface.
https://github.com/stephanvolynets/event-rsvp-app-mern
mern speed
Last synced: 12 days ago
JSON representation
A RESTful, Modern, and Responsive Client sided React Application for managing event RSVPs with realtime updates and an intuitive user interface.
- Host: GitHub
- URL: https://github.com/stephanvolynets/event-rsvp-app-mern
- Owner: StephanVolynets
- Created: 2024-11-12T08:16:02.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-12T11:56:44.000Z (3 months ago)
- Last Synced: 2024-11-19T16:58:15.040Z (2 months ago)
- Topics: mern, speed
- Language: JavaScript
- Homepage:
- Size: 298 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Event RSVP Application by Stephan Volynets
> ***A Modern, Responsive Client sided React Application for managing event RSVPs w/ realtime updates and an intuitive user interface.***
Snapshot
# Project Overview
This application provides a seamless event management experience with features including:
- 🎪 Dynamic event listing with responsive grid layout
- 🔄 Real-time RSVP updates
- 💫 Smooth animations and transitions
- 🎨 Modern, accessible UI with Chakra UI
- 📱 Full responsive design
- âš¡ Optimized performance with React
## Technical Stack
- **Frontend**: React, Chakra UI, Framer Motion
- **Backend**: Express.js, MongoDB
- **State Management**: React Hooks
- **API Communication**: Axios
- **Styling**: Chakra UI + Custom Theme
- **Animation**: Framer Motion
## Performance Optimizations
- ***Lazy loading of components***
- ***Optimized re-renders***, minimizing unecessary renders
- ***Debounced API calls***, reducing number of API calls
- ***Skeleton loading states***
- ***Image optimization***
## Component Architecture
### Component Tree
```
App
├── ChakraProvider (Theme)
└── Container
├── Header
└── EventList
├── LoadingSkeleton
└── EventCard
├── Event Details
└── RSVP Button
```
### Data Flow
```mermaid
graph TD
A[App] -->|Events Data| B[EventList]
A -->|RSVP Actions| B
B -->|Event Props| C[EventCard]
C -->|RSVP Toggle| A
A -->|API Calls| D[Backend]
D -->|Response| A
```
## Data Management
### API Integration
```javascript
// Example API call implementation
const fetchEvents = async () => {
try {
const response = await axios.get("http://localhost:8080/api/events");
setEvents(response.data);
} catch (err) {
// Error handling
}
};
```
### API Endpoints
**Response Format: Newly created event object.**
| Endpoint | Method | Description |
|----------|--------|-------------|
| `/api/events` | GET | Fetch all events |
| `/api/events/:id/headCount/rsvp` | POST | RSVP to an event |
| `/api/events/:id/headCount/unrsvp` | POST | Cancel RSVP |
### Database Schema:
**Events Collection**
> Each document in the `events` collection has the following schema:
- `_id`: ObjectId - Unique identifier for the event.
- `name`: String - Name of the event.
- `description`: String - Description of the event.
- `date`: Date - Date when the event is scheduled.
- `location`: String - Location where the event will take place.
- `headCount`: Integer - Number of people who have RSVPed to the event.
Example Document:
```json
{
"_id": ObjectId("..."),
"name": "Ithaca Farmers Market",
"description": "A gathering of local farmers and artisans. Fresh produce, handmade crafts, and more.",
"date": "2023-07-15",
"location": "Ithaca Farmers Market Pavilion",
"headCount": 0
}
## React Hooks Usage
### State Management
```javascript
// Core state hooks
const [events, setEvents] = useState([]);
const [loading, setLoading] = useState(false);
const [userRSVPs, setUserRSVPs] = useState({});
```
### Effect Patterns
```javascript
// Data fetching effect
useEffect(() => {
const fetchEvents = async () => {
setLoading(true);
try {
const response = await axios.get("http://localhost:8080/api/events");
setEvents(response.data);
} finally {
setLoading(false);
}
};
fetchEvents();
}, []);
```
## User Interface
### Design System
- **Theme**: Custom Chakra UI theme with Inter font
- **Colors**: Dynamic color scheme with gradient accents
- **Components**: Reusable, accessible components
- **Animations**: Framer Motion for smooth transitions
### Key Features
1. **Responsive Grid Layout**
- Adaptive columns based on screen size
- Maintains symmetry with filler cards
2. **Interactive Cards**
- Hover animations
- Loading states
- RSVP status indicators
3. **Accessibility**
- ARIA labels
- Keyboard navigation
- Screen reader support
### User Flow
1. User views event grid
2. Hovers over event for more details
3. Clicks RSVP button
4. Receives confirmation toast
5. Sees updated attendance count
## Getting Started
### Prerequisites
- Node.js (v14 or higher)
- MongoDB
### Installation
1. Clone the repository:
```bash
git clone
```
2. Install dependencies:
```bash
# Install client dependencies
cd client
npm install
# Install server dependencies
cd ../server
npm install
```
3. Configure environment:
```bash
# Create .env file in server directory
echo "PORT=8080" > .env
```
### Running Locally
1. Start MongoDB:
```bash
mongosh init.mongo.js
```
2. Start the server:
```bash
cd server
npm run dev
```
3. Start the client:
```bash
cd client
npm start
```
The application will be available at `http://localhost:3000`.
# Contributing
1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request