Git Product home page Git Product logo

react-aoe2-api-app's Introduction

React Nginx

Age of Empires 2 - Web application with API integration ⚡️

Project Briefing

This is a simple database application which integrates with Age of Empires 2 API and lists various entities available in the game like units, civilizations, structures and technologies.

Made with ❤️ by @apfirebolt

Please find me here

Features

  • Demonstrates use of Context API in React.
  • Demonstrates use of beautiful Material UI React Components like cards, buttons, accordions and more.
  • Contains use of updated React Router packages.

Built With

Project setup

Simply install node modules for the React app and you're done at least for the development mode.

npm install
npm start

For production, build the frontend of the app.

npm run build
npm start

Future Updates

  • Deployment scripts to be added through Docker, Heroku and Netlify.
  • Search bar to be added for searching civilizations, units and more.

Heroku Deployment

Heroku is probably the easiest of the methods available to make your app available to the public. It might not be the best method for production ready apps, but would be more than suffice for testing purpose.

So, the requirements then. You must have a Heroku account and certain free space available in case you're using free version.

  1. From your Heroku Web Dashboard (https://dashboard.heroku.com/apps) click on "New" to create a new app, give a name to the app which should be unique in Heroku universe.
  2. Navigate to the 'Deploy' tab and choose "Github".
  3. Create a repo on Github and push all your React app code in it.
  4. Just below the Deployment section, you'd find option to connect your app from Github to the current Heroku app. You can do so by simply searching for your app which must be on your Github account.
  5. Choose a branch to deploy, optionally you can also setup a pipeline which would automatically deploy if a given branch is modified on Github. Do not click on 'Deploy' yet, there is one thing still to do.
  6. We forget one important step, that is to add a build pack which would deploy React apps on Heroku. Heroku does have build packs for Python, Ruby but not something by default which could deploy your react app.
  7. Go to 'Settings' tab, choose build-packs and add this 'https://github.com/mars/create-react-app-buildpack'
  8. Go back to step 5 and click 'Deploy'.
  9. You'd see logs for your on-going build, in case it is a success you'd see the link of your app at the bottom once the build process is executed successfully.
  10. For instance, my app link is https://react-aoe2-app.herokuapp.com/technologies, that is it. Your app is live now on Heroku.

Docker Deployment

This app can also be deployed in production using Docker containers assisted through Nginx servers serving the build files.

  1. Setup your Docker and Nginx files within the project directory.
  2. Create a Docker image
  3. Spawn a container from the image created on port 80
sudo docker build . --tag=react-aoe2
sudo docker run -d -p 80:80 react-aoe2

Project Screenshots

Please find some of the screenshots of the application. Below is the screenshot of the Homepage.

alt text

Civilizations page, this page lists all the civilizations available in the game.

alt text

Structures page, this page lists all the structures available in the game.

alt text

Technologies page, this page lists all the technologies available in the game.

alt text

react-aoe2-api-app's People

Contributors

apfirebolt avatar

Watchers

 avatar  avatar

Forkers

1aegis

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.