This documentation provides an overview of the Events App, a full-stack web application built using the MERN (MongoDB, Express, React, Node.js) stack. In this project:
- Next.js is used as the framework for the React client, enhancing the performance and SEO-friendliness of the application.
- React DOM is employed for rendering the user interface, the useSWR hook is utilized for data fetching, Firebase is used for storing events data, Postman is used for API testing, and npm serves as the package manager.
The Events App offers a range of features to make event management and exploration easy and enjoyable:
1. Register for Newsletter: Users can register for a newsletter to stay updated about upcoming events and receive event-related news and information.
2. Display Featured Events: Featured events are prominently displayed on the app's homepage, making it easy for users to discover and explore the most exciting and important events.
3. Explore Single Event Description: Users can click on an event to view detailed information, including the event's date, time, location, description, and any associated images.
4. Write a Comment and View Comments: Users can leave comments on event pages, sharing their thoughts and experiences. They can also view comments left by others, fostering interaction and engagement.
5. Filter Events by Year and Month: Events can be filtered by year and month, allowing users to quickly find events that match their preferences and schedules.
Next.js offers several advantages for building the Events App:
Server-Side Rendering (SSR): Next.js provides SSR out of the box, improving SEO and page load times.
Efficient Routing: Next.js simplifies routing, making navigation between pages seamless.
Automatic Code Splitting: The framework automatically divides code into optimized bundles, reducing page load times.
Static Site Generation (SSG): Next.js supports SSG, ideal for content-based apps like this one. Pages are pre-rendered at build time, enhancing performance and reducing server load.
Built-in CSS Support: Next.js offers built-in support for CSS modules and styled-components, simplifying styling.
To run the Events App locally, follow these steps:
- Clone this repository.
- Navigate to the project directory.
- Install dependencies using npm install.
- Configure Firebase with your credentials.
- Start the development server with npm run dev.
- Open your web browser and access the app at
http://localhost:3000.
The Events App provides the following API endpoints:
- GET
/api/events: Fetch all events. - GET
/api/events/:id: Fetch a single event by ID. - POST
/api/newsletter: Register for the newsletter. - POST
/api/comments/:id: Post a comment on an event.
To test the API endpoints using Postman:
- Open Postman.
- Import the provided collection file for testing.
- Execute the requests to test the endpoints.