AdsTrees

Description

AdsTrees is a revolutionary web application that intertwines the power of advertising with environmental sustainability. It offers a unique platform where viewers can watch premium ads voluntarily, and in return, trees are planted, contributing to a greener planet. For advertisers, AdsTrees provides an opportunity to showcase their content in a premium space while actively participating in carbon footprint offsetting through tree planting. This initiative not only supports environmental causes but also helps companies build meaningful connections with their audience.

Table of Contents

• AdsTrees
  • Description
  • Table of Contents
  • Installation
    • 1. Cloning the Application and Using Node.js
    • 2. Directly Accessing the Deployed Application
  • Usage
  • Credits
  • License
  • Link to the Deployed Application
  • Preview of the Application
  • Contact

Installation

The application can be used in two ways:

1. Cloning the Application and Using Node.js

To use the application using this method, please follow these steps:

• Clone the repository to your local machine using the Command Line Interface (CLI).

• Navigate to the project directory.

• Install all the required dependencies by running "npm install".

• Set up your environment variables in a ".env" file with the following information:

  SECRET_KEY=''

  NODE_ENV=''

  MONGODB_URI=''

• Initialize the database schema and seed data.

• Build the application by typing "npm build" in the terminal.

• Start the application by typing "npm start" or "node server.js" in the terminal.

• Once the application is running and listening, you can access it at http://localhost:3001/ using your web browser.

2. Directly Accessing the Deployed Application

Alternatively, you can access our application directly by clicking the link to the deployed application on Render.

Deployed Application on Render

Usage

People can voluntarily view premium ads on AdsTrees, contributing to tree planting initiatives that promote a greener planet. Advertisers benefit by showcasing content in a premium space while actively reducing their carbon footprint through tree planting. This innovative initiative supports environmental causes and enables companies to forge meaningful connections with their audience.

Credits

We would like to acknowledge the following for their contributions and resources:

• Codesanbox.io - React Checkboxes (Link).

• Stack Overflow - Full browser display of React outlet (Link).

• AutoHTML Figma Plugin - React Code Generation from Figma mockups (Link).

• YouTube API - Display ads beta feature (Link).

• React with Vite - Build a fast, modern web interface using React, initialized with Vite for enhanced performance (Link).

• Chakra UI - Implement a polished, responsive UI with Chakra UI for an intuitive user experience (Link).

• React Helmet - Manage the document head for each page with React Helmet for SEO optimization (Link).

• React Router - Handle in-app routing efficiently with React Router (Link).

• Node.js - Robust server-side handling using Node (Link).

• Express.js - Manage routing and middleware (Link).

• Appollo Server - Implement Apollo Server for GraphQL integration, enabling efficient data fetching and manipulation (Link).

• GraphQL - Implement Apollo Server for GraphQL integration, enabling efficient data fetching and manipulation (Link).

• Appollo Server - Implement Apollo Server for GraphQL integration, enabling efficient data fetching and manipulation (Link).

• MongoDB & Mongoose ODM - Utilize MongoDB for database management with Mongoose ODM for data modeling (Link).

• JSON Web Tokens - Implement JWT for secure authentication (Link).

• BCRYPT - Use bcrypt for hashing and securing user passwords (Link).

• dotenv - Manage environment variables securely with dotenv (Link).

• CORS - Handle Cross-Origin Resource Sharing (CORS) for secure API requests (Link).

• Vite Plugin PWA - Implement a service worker for offline functionality and faster load times, and use a web manifest to ensure the app is fully PWA compliant and installable (Link).

• Stripe Payments - Secure and efficient payment processing for enterprise subscriptions (beta) using Stripe (Link).

• Render - Deploy the application on Render for reliable hosting (Link).

• MongoDB Atlas - Use MongoDB Atlas for cloud-based database management (Link).

• Chrome Workbox - Production-ready service worker libraries and tooling (Link).

• React Player - A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura (Link).

• Moment.js - Parse, validate, manipulate, and display dates and times (Link).

License

This project is licensed under the MIT License. Please refer to the License file in the repository for more information.

Link to the Deployed Application

Link for the Deployed Application on Render - ADD LINK HERE

Preview of the Application

Contact

If you have any questions or inquiries, please feel free to contact our team:

• GitHub: https://github.com/coolcoders23/adstrees