Envy

A NextJS application showcasing a use-case of an event & venue management platform. Live version available at: https://envy-cvrlnolan.vercel.app/

Description

This project is a blueprint(snippet) or template that demonstrates how basic CRUD operations can be applied in a real-world context to solve or ameliorate the management of events & venues. It covers the creation, display and update of event or venue related data. Additionally, it uses microservice REST API endpoints like payment, map rendering & geolocation for more simulation of a real world situation. This project's purpose is also to inspire other developers who are trying to develop a similar logic to have an idea on how to go about it.

Installation

1. To get this project files locally on your machine, you can clone this repository by running the following command on your terminal or command line:

git clone https://github.com/cvrlnolan/envy

2. Next, you need to setup the .env file found in the root with the appropriate API Keys & credentials from the following service providers:

• Google Firebase
• Paypal Developer
• Monetbil (Optionally used for Mobile Money modes of payment)
• Mapbox
• Mailtrap
• OpenCage Data

3. Install all the dependency packages found in the package.json file by running yarn install or npm install from the project root directory.

4. To start the development server of the application, run npm run dev or yarn dev. This should log some start-up application information & display the development server url: http://localhost:3000. Visit http://localhost:3000 to view your application.

Usage

General

This application was built reflecting the MVC architecture and the main dependencies(all found in the package.json) of the application are organised as so:

• Front-end User Interface(UI): React.js ,Semantic UI React
• Backend Integration: NextJS API(serverless functions) (basically NodeJS)
• Database Management: Firestore (a database service provided by Google Firebase)
• File Storage: Firebase Storage

Other important services & dependency libraries of the application include:

• axios: An http client to fetch urls and make api calls or requests within the application.
• swr: To fetch and revalidate data on the client-side of the application while keeping the UI reactive.
• nodemailer: Module for mail sending after a successful purchase.
• nodemailer-express-handlebars: To handle and compose email templates with dynamic variales.
• @paypal/react-paypal-js: A library to easily integrate the Paypal Javascript SDK components and the Paypal Buttons to the application.
• compressorjs: Javascript image compressor to compress images before uploading them to storage to have an optimized and servable version.
• Firebase Admin SDK: Mainly used in NextJS serverless functions as these functions are being called in a native NodeJS environment hence the Admin SDK is suitable to connect to Firebase services.
• react-map-gl: To render a map view based on recieved longitude and latitude parameters.
• testing-library: This library provides simple and complete testing utilities to be implement in our test scripts.
• jest: A JavaSript Testing Framework to run test scripts in the virtual environment of our application.

Directives

The application is organized from the root(.) as follows:

• ./page/ folder(integrated by NextJS) contains the UI Views for the application with the exception of the ./page/api/* sub-folder.
• ./page/api sub-folder(integrated by NextJS) contains serverless and NodeJS backend code for the application.
• ./firebase/ folder contains the database initialization configurations and the subfolders contain database logical operations.
• ./components/ folder contains coded UI layouts to be used through out the application.
• ./components/mailService sub-folder contains the mailing function component for sending emails and mail templates to use.
• ./assets/ folder contains pre-defined data selections to be used by the appliction.
• ./styles/ folder(integrated by NextJS) contains the global style of the application accessible by all components.
• ./public/ folder(integrated by NextJS) contains global files to be shared through the application. You can store images here.

Absolute imports to any of these folders through the application are configured in the jsconfig.json file in the root.

The application's code source contains inline comments which will provide further help and guidance on how an important piece of module or component works. The code quality was tested with JSLint

Deployment

You may eventually want to deploy a live version of your app in a future instance. Vercel platform is suitably built fo the deployment of NextJS application and more as they have an integrated environment to deploy directly from your own Github Repository.

Tests

The tests folder contains some major component Unit Test scripts which have been passed successfully to ensure the application functions and renders as it is intended to. Only the major components have been tested. You can decide to add more tests on your personal end.

To run a test, type npm run test or yarn test including the test script you want to run ex:

yarn test index

The jest.config.js file contains the configuration options for our Jest Test Runner.

Support

If any worries, bugs or problem arises in the future, you can create an issue, contribute or contact me via:

• carlnolan@lootyclub.com

Roadmap

This can serve as ground basis for any future ideas or use-case in this context hence strapping it up with some authentication might give it or more secure foundation.

License