Giter Site home page Giter Site logo

ankitqki / ivanc Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ivacf/ivanc

0.0 0.0 0.0 494 KB

Personal website built with React and Django

Home Page: http://ivanc.uk

License: Apache License 2.0

API Blueprint 4.40% HTML 36.09% Python 40.93% JavaScript 15.36% CSS 3.21%

ivanc's Introduction

ivanc - amazing work , but need to upgrade

This repository contains two applications:

  1. A React app that displays information about the author and his/her work as a software developer. See deployed at http://ivanc.uk
  2. A Django server app that assists the React app by providing data via a REST API. See deployed at https://api.ivanc.uk

React app

Source code located under /web-client. This React app is set up with Webpack and Express so that the React components are rendered in the server side.

Getting started

  1. npm install: install app dependencies.
  2. Make sure the companion API app is running athttp://localhost:8000/
  3. npm start: start the dev server at http://localhost:3000/
  4. Modify any of the components under /src and see the changes in real time thanks to React Hot loader

Deployment

This app can be deployed as a Node application on Heroku or Dokku. There is a heroku-postbuild script in package.json so every time the app is pushed to Heroku, Webpack compiles the JavaScript code in production mode. Webpack outputs the result into public/bundle.js that is loaded from index.html. This index.html file is then served with Express when the root endpoint is requested. See server.js for more details.

There are a couple of environment variables that need setting up before deploying:

  • API_BASE_URL: The URL where the Django server app is deployed. e.g. https://api.ivanc.uk/
  • GA_TRACKING_CODE: Your Google Analytics tracking code.

Django server app

Source code located under /server. This Django API provides data such as a list of apps, articles and open source repositories through a REST API. It also provides an admin panel that allows adding, deleting and amending data with ease. It's implemented using Django REST Framework.

Getting started

  • Create a Python virtual environment under /server. You can follow this guide.
  • Set up the Django settings environment variable: export DJANGO_SETTINGS_MODULE=ivanc.dev_settings. To avoid having to do this every time you can add this line to the activate script file located in your virtual environment env/bin/activate
  • Activate the environment: source env/bin/activate
  • Install dependencies: pip install -r requirements-dev.txt
  • Now you're ready to run the dev server: python manage.py runserver

Testing

This Django project contains test for all endpoints. You can run them with python manage.py test. Some endpoints call external APIs. In order to avoid flaky tests, these external interactions are mocked using VCR.py. Note the first time you run them they will perform real HTTP interactions. Consecutive executions will reuse the first response and the tests will no longer call the external API.

Deployment

This app can be deployed as a Django application on Heroku or Dokku. The following environment variables are expected:

  • DJANGO_SETTINGS_MODULE: This must point to the prod settings file ivanc.prod_settings
  • DJANGO_SECRET_KEY: A random key used by Django. More info here.
  • DATABASE_URL: Pointing to a PostgreSQL database. This variable is usually set up automatically by Heroku or Dokku after linking your app to a database.

An AWS bucket is required to store media files. You can follow this tutorial to create an AWS bucket with the right permissions. Once that is done, you must point Django to your AWS bucket by adding these three env variables:

  • AWS_ACCESS_KEY_ID
  • AWS_SECRET_ACCESS_KEY
  • AWS_STORAGE_BUCKET_NAME

The /repos endpoint uses the GitHub API to pull data about repositories. The call doesn't require any authentication, however the GitHub API has very low rate limits when performing non-authenticated calls. If you want to increase this limit to avoid problem you can create a GitHub OAuth application and use the generated values to set up two more variables:

  • GITHUB_CLIENT_ID
  • GITHUB_CLIENT_SECRET

License

  Copyright 2016 Ivan Carballo.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

ivanc's People

Contributors

ivacf avatar ankitqki 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.