Giter VIP home page Giter VIP logo

franks-calendar's Introduction

Frank's Calendar

How to collaborate

  1. Fork this repository! This means you create your own version on your account that you own and can make changes to.
  2. Start making changes to your fork. Once you make a significant change, make a commit and push to your remote.
  3. Once you have a feature to implement (in the form of a series of commits), open a pull request on the original repository.
  4. I'll check for merge conflicts, resolve any that come up, and then merge your request (this helps manage merge conflicts that are a pain to deal with on your own).

Running the app

  1. Fork the repository by going to the main repository and clicking the button that says Fork.

  2. Clone the repository to your local computer. In your terminal, run

    $ git clone https://github.com/<your-username>/franks-calendar.git
    $ cd franks-calendar
  3. Make sure you have Docker installed.

  4. Type in

    $ docker-compose up -d
  5. Wait while Docker installs all its dependencies and builds the containers.

  6. When the command finishes and you see the prompt again, navigate to http://localhost:5000.

Ingesting Data (events)

Do this!

docker exec -ti franks-calendar-database \
  mongoimport --db=calendar-dev --collection=events \
  --authenticationDatabase=calendar-dev --username=frank \
  --password=calendar --drop --file ./events.json

Windows

If you are using Windows, I don't know that I will be of much assistance--I've gotten mixed results from trying to install this on Windows, but message me and I will do my best to help!

How everything works

Front end

Our front end uses the ReactJS web app framework. I chose this because I have the most experience with it and it is an incredibly powerful tool. It also can do exactly what we want it to do.

The centerpiece of the app is a FullCalendar module that runs the calendar that users can interact with. It's documentation is a bit confusing so feel free to ask me for help/clarification.

We use Sass (in particular, SCSS, which stands for "Sassy CSS") for CSS because it's cleaner and easier to read and maintain.

We use Webpack to bundle and transpile all SCSS and ES6 (JavaScript).

Back end

The back end of the app uses Python's Flask framework for HTTP routing and creating an API. We use MongoDB for a database. The API is how the front end interfaces with the back end. It might be worth reading up on REST APIs, which is what we are using (and is the most common type).

Additional Notes

  • When editing the HTML files, put everything in between the {% block page %} and {% endblock %}. This will make sure it gets included when the page is loaded

Docker (windows) Instructions via Nathan

  1. Clone your fork of repo using "git clone"
  2. Ensure docker desktop is running
  3. Open Docker Desktop settings (right click on tray icon)
  4. Enable Drive sharing (Resources->File Sharing->Select your drive)
  5. Navigate into root of the project using powershell
  6. In powershell run (this may take a while)
$ docker-compose up -d
  1. Navigate to localhost:5000 to see your Franks Calendar!

franks-calendar's People

Contributors

jack-greenberg avatar karneh avatar julesbrettle avatar kylecombes avatar jellyyams avatar dependabot[bot] avatar reisenbud avatar ridunoff avatar teadetime avatar

Watchers

James Cloos 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.