Code Monkey home page Code Monkey logo

save-earth's Introduction

Save Earth with Astra

Create entries of newly discovered, rare, or near-extinct life discoveries on earth for the world to see!

image image image

Stack Highlights πŸ₯ͺπŸ₯ͺπŸ₯ͺ

This web app makes use of :

  • Reactjs : Render components with data from your db and make them dynamic and responsive to user input.
  • Netlify : Are you new to Netlify, so was I when I started this project. It's easy to learn. Provides a powerful serverless platform that's easy to scale
  • Astra DataStax : Also my first time using Astra, You can easily perform CRUD operations with Astra Collections. Astra's edge is at their low latency and high-write operations suitable for BigData ops.

You Should Know That...

while this was created to be serverless with Netlify and 96% of operations are carried out using Netlify and Astra it does use a tiny weenie bit of backend for Authentication and only authentication(signup and signin) why?... For Security..., because it was easier... who knows! I would need you to get waaay off my back, it's my app! Now let's get started.

Why???

This app was designed for the explorers, adventurers of the world. It is a way for you to feature something weird you saw from any where on earth and save it. Hence, Save-Earth get it... πŸ˜β˜ΊπŸ˜“πŸ˜“

How???

Give it a name, add a caption, give some description, tell us where you saw it. Take a pic, send us the link, just the link please. When adding a location have in mind that the app uses Google Geocoder API So use a language Google map will understand. It also uses Google Javascript Map API for exact coordinates all well integrated into the React App, so, don't forget to click the coordinate button!

Who??

Like I said earlier, It's for we, the environmental freaks, who care about nature... NGOs, scientist, researchers, explorers etc... that care about what's on earth, etc...


Checkout the site here πŸ‘‰ saveearth πŸ‘ˆ


  • First, signup and then signin (ensure your password has the following: alphanumeric, symbol and one capital letter eg. P@$$word123)
  • Upload link only show after signin
  • Feel free to explore and create your own discovery
  • The donation is in a sandbox for now (braintree) feel free to use this fake card detail for testing: 4111 1111 1111 1111 12/22

Setup

Setup Astra


First of all I would like to thank astra for giving me 5GB free, no credit card required Wondering the catch? Me too... tell if you find one.


DataStax Astra

  1. Create a DataStax Astra account if you don't already have one: image

  2. On the home page. Locate the button Create Database image

  3. Locate the Get Started button to continue image

  4. Define a database name, keyspace name and select a database region, then click create database. image

  5. Your Astra DB will be ready when the status will change from Pending to Active πŸ’₯πŸ’₯πŸ’₯ image

  6. After your database is provisioned, we need to generate an Application Token for our App. Go to the Settings tab in the database home screen. image

  7. Select Admin User for the role for this Sample App and then generate the token. Download the CSV so that we can use the credentials we need later. image

  8. After you have your Application Token, head to the database connect screen and copy the connection information that we'll need later. We'll replace ASTRA_DB_APPLICATION_TOKEN with the Token value that is part of your Application Token. image

After having your DB set, you can use this as a template on github, click the button πŸ‘† or...


Clone to your local machine... git clone <put copied git link here>

Install all dependencies in package.json npm install

While that is working, you should sort out your .env file, go to the .env.sample file you will get details on your environment variables

While you can run the app with npm start I would advise using npx netlify dev to enable you utilize netlify-functions

Happy coding!

Make sure to get the backend for authentication at πŸ‘‰ save-earth-BE Note that after signup, you can switch the role from regular user => user: 0 to Administrator => admin:1 at the backend

save-earth's People

Contributors

bayurzx avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.