hckhanh/games-searcher

A search tool for gamers who love best prices

Project Title

A search tool for gamers who love best prices

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

• Node.js 7.7.1 or above
• isthereanydeal.com api
• openexchangerates.org api

Installing

1. Clone the project
2. You will need to setup environment variables. Some API keys are confidential, you need to get them by yourself

Variable	Description
ITAD_API_KEY	isthereanydeal.com
FACEBOOK_APP_ID	Additional, I use Facebook service to use some plugins to share and track data
OER_APP_ID	openexchangerates.org
APP_URL	http://localhost:3000
APP_TITLE	Games Searcher
APP_DESCRIPTION	A search tool for gamers who love best prices
APP_IMAGE	http://localhost:3000/cover.png

Run the project in development mode

npm i
npm run dev

Running the tests

npm test

For now, I just cover the testing for API of the application on the server side

Build

Simply run

npm run build

But you will need to setup these environment variables for production:

Variable	Description
APP_TITLE	Games Searcher

Deployment

Currently, I am using Heroku to deploy the production app. You need to change these environment variables in production stage

Variable	Description
ITAD_API_KEY	isthereanydeal.com
OER_APP_ID	openexchangerates.org
FACEBOOK_APP_ID	Use the production app id of Facebook API
APP_TITLE	Games Searcher
APP_URL	The root url of the application
APP_DESCRIPTION	A search tool for gamers who love best prices
APP_IMAGE	The url of the cover image when user share the app to Facebook

I am using Rollbar service to track error from both front-end and backend sides. So there are additional apis need to be set:

Variable	Description
ROLLBAR_CLIENT_TOKEN	Your server-side access token
ROLLBAR_SERVER_TOKEN	Your client-side access token for games-searcher

Built With

• Webpack 2 - The assets bundle tool

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Author

• Khanh Hoang - Initial work - hckhanh

Sponsor

License

This project is licensed under the MIT License - see the LICENSE.md file for details

games-searcher's Issues

Make the site more responsive for Mobile

Add currency options with Open Exchange Rates

Use Open Exchange Rates apis to get currencies data and convert current USD price to specific currency

Make Share button on Facebook

• Add share button the right of main menu

Integrate app with Facebook SDK (open graph, analytics)

• Add Open Graph meta data to header
• Restructure template files (pug)
• Update production configurations
• Add Facebook SDK to layout.pug

Integrate Opbeat to track error

• Integrate Opbeat for React
• Integrate Opbeat for Node.js

Update production configurations for Heroku

• Add missing module
• Update webpack config
• Configure environment variables

Optimize imported modules

• Refer to import ES6 modules
• Import specific modules rather than all modules

Add global error message for fetch actions

• User should receive the error message to restart the website
• UI of error message should follow the site

Add favicon for website

Following the specification about Favicon from W3C

https://www.w3.org/2005/10/howto-favicon

Use react-helmet stead of pug file to render static open graph data

• Remove Open Graph data from pug file and add to React file
• Add to home and search detail context

Integrate Snyk to track dependencies critical updates

Track dependencies version to make sure the best security for the app

Update css styles for controls on menu bars

Rework with the style and theme for top menus

Top menu should follow user when they scroll

Compose README files for better understanding the project

• Installation
• Development instruction
• Deployment instruction

Implement Server side rendering for website

• Add test cases for server apis (mocha)
• Check Redux Devtool implementation