Running with Swag is an online community created by runners, for runners. Whether you are a competitive runner, running enthusiast, or just a beginner, this site has something for you.
- Live
- Screenshots
- About this project
- Getting started
- Deploying the app
- Technologies used to create app
- Direction for future development
- Issues
https://running-with-swag.firebaseapp.com
I created this site because I love to run. Running is my passion. Running has been a big part of my life ever since I was a kid. In 2018, I started to train and run competitively in different short distance (3-6 mile) races. My ultimate goal is to train my way up to running and finishing a marathon.
I not only created this site to share my running adventures and experiences, but I also want to create an online community for runners to learn more about different running topics, find out about upcoming running events, and just have a place where runners can come together to share and exchange information with one another.
I graduated from the University of Minnesota Full Stack Web Development program in May 2018, and I have been wanting to create a site like this for quite some time now. Now that I have graduated, I thought now would be a good time to start it up. This site's development will be ongoing and open source. So, if you are a runner and/or web developer and would like to contribute, let's get in touch.
On the front end side, this project is built using React, which is an open-source Javascript library developed at Facebook specifically for the task of developing user interfaces. React relies on a component-based architecture where elements of the user interface are broken into small chunks of code called components. PrimeReact is a UI component framework for React that helps with building these components. Also, the web pages are designed using the css grid layout system
On the back end side, this project is a Node.js app. The app uses Firebase Authentication with a Google sign-in method to authenticate users with the app. Firebase Realtime Database is used to store the race stories users provide on the Races page as well as store messages from the contact form. Firebase Hosting is used to deploy and host the site. Finally, this site uses the Tumblr API to retrieve blog posts from my Tumblr running blog and display them on the Blog page.
When you first visit the app, you will be prompted to log in. To log in, you will need to authenticate with Google. If you don't have a Google account, you will need to create one to use this app. Additional sign-in methods, such as username/password, Facebook, and Twitter, will be added in a future development cycle.
After you authenticate, you are taken to the Home page. From this page, you can navigate to all the different pages within the app.
The About page contains an overview of the app and why I created it.
The Races page displays race stories that I or other users have provided using the form on this page. The race stories are stored in a Firebase realtime database.
The Blog page displays a list of blog entries from my Tumblr blog. The app gets the blog entries using axios and the Tumblr API. Here, you will find information on a variety of topics, including running tips, training, injuries, and more.
The Swag page includes reviews of different running products I have purchased to help me train for upcoming races. Right now, the data on this page is stored in a JSON file on the front end side. In a future development cycle, this information will be stored in a back end database.
The Contact page contains a form that you can use to provide feedback on the site, ask a question, or just send me a message. The contact form is hooked up to Firebase.
After you clone the repository, navigate to the project root directory (running-with-swag). The project directory structure is set up as follows:
- client
- public: The public folder contains the index.html file. This HTML file is a template. The file is empty. So, if you open it directly in a browser, you will get an empty page. Rather than placing the HTML code directly in index.html, this app uses a React component-based architecture to create, build, and render UI components to the page.
- src: The src folder is where the React app components reside.
- images: Contains the images used in the app.
- App.js: The App.js file is where the app components are imported and rendered, such as the navigation bar, footer, and various pages.
- index.js: The index.js file is the top level file of the React app. In index.js, the App.js file is imported, and the ReactDOM.render method is used to render App.js to the page.
- components: The Components folder is where the app components that are reused across the app are located. Each file represents a separate component. For example, NavBar.js is the top navigation bar component.
- containers: Holds all the pages of the app and the child components within those pages. For example, inside of the containers folder, there is a Swag folder. The Swag folder contains a top-level parent container/page called Swag.js.
- utils/API.js: Contains axios request to grab blog posts from the Tumblr blog site using the the Tumblr API.
- App.css and index.css: The external css stylesheets for the app.
- firebase-config.js: contains the Firebase initialization code to connect the app to Firebase.
- .eslintrc.json: List of rules and their definitions for ESLint.
- .gitignore: Anything listed inside this file (for example, node_modules) will not be tracked by GitHub when code is committed.
- package.json: Lists the project dependencies and their version numbers.
- README.md: The README file for Facebook's create-react-app.
- yarn.lock: Dependency tree for the project. Lists all the client dependencies and their versions.
- readme_images: Images used in the project README file.
- scripts
- build.js: Run yarn build in the project root directory to create a production build of the app, which you can use to deploy the app to Firebase.
- start-client: Script used to start the React development server.
- .firebaserc: Hidden file that allows you to quickly switch between projects with 'firebase use'.
- .gitignore: Anything listed inside this file (for example, node_modules) will not be tracked by GitHub when code is committed.
- database.rules.json: Contains read/write rules for reading and writing data to the Firebase database.
- firebase.json: Firebase configuration file required to deploy site.
- package.json: Lists the project dependencies and their version numbers. It also contains various scripts to start the server, create a production build, etc.
- yarn.lock: Dependency tree for the project. Lists the project dependencies and their versions.
The following section will take you through the steps of setting up this app and getting it running locally on your computer.
If you don't want to set up this project locally and just want to see the deployed application, go to https://running-with-swag.firebaseapp.com.
To set up this application locally on your computer, perform the following steps:
- Clone the repository
- Install Node.js
- Install yarn
- Install the project dependencies
- Start the React development server
The first step is to clone the project repository to a local directory on your computer. To clone the repository, run the following commands:
git clone https://github.com/philipstubbs13/running-with-swag.git cd ./running-with-swag
If you don't already have Node.js installed on your computer, you can install the latest version here.
To be able to install the dependencies and start the application locally, you will need to install yarn. Yarn is a package manager like npm.
To install yarn, run the following command:
npm install -g yarn
For more information about yarn and other installation options, see the yarn documentation: https://yarnpkg.com/en/.
The following packages are dependencies to the project.
- axios - a promise based HTTP client for the browser and node.js (https://www.npmjs.com/package/axios)
- classnames - a JavaScript utility for joining class names together (https://www.npmjs.com/package/classnames)
- firebase - tools and infrastructure used to develop app (authentication, hosting, and database). (https://www.npmjs.com/package/firebase)
- font-awesome - app icon library (https://www.npmjs.com/package/font-awesome)
- moment - package used for formatting dates (https://www.npmjs.com/package/moment)
- primeicons - font icon library for Prime UI libraries (https://www.npmjs.com/package/primeicons)
- primereact - UI component framework for React (https://www.npmjs.com/package/primereact)
- prop-types - Used to document the intended types of props passed to components (https://www.npmjs.com/package/prop-types)
- react - package for accessing React (https://www.npmjs.com/package/react)
- react-dom - serves as the entry point of the DOM-related rendering paths (https://www.npmjs.com/package/react-dom).
- react-router - package that provides the core routing functionality (https://www.npmjs.com/package/react-router).
- react-router-dom - a third party routing library (https://www.npmjs.com/package/react-router-dom)
- react-scripts: package that includes scripts and configuration used by Create React App (https://www.npmjs.com/package/react-scripts)
This project also uses ESLint, which includes the following dependencies:
- babel-eslint
- eslint
- eslint-config-airbnb
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react
Version information for each of these packages is available in the package.json file in the client directory.
After you clone the repository to a local directory, change directory to the client directory and run the following command to install the required dependencies:
yarn install
After performing all of the setup steps in the Getting started section, navigate to the project root directory (running-with-swag) and run the following command to start the React development server.
yarn start
After the development server has started, a Chrome browser window should open, and you should see the login screen for the application. If the browser does not automatically open after the server starts, you can verify that the application is working locally on your computer by opening Chrome and going to http://localhost:3000.
This app is deployed to Firebase using Firebase Hosting. For more information on hosting with Firebase, see https://firebase.google.com/docs/hosting/. To deploy the app, you will need to build a production version of the app as well as have the Firebase CLI installed.
- If not already installed, install the Firebase CLI by running the following command:
npm install -g firebase-tools
This installs the globally available firebase command. To update to the latest version, simply re-run the same command.
- To connect your local machine to your Firebase account and obtain access to the Firebase project, run the following command:
firebase login
-
Change directory to the running-with-swag/client directory.
-
If you have deployed the app before, there will be a build directory inside running-with-swag/client. Delete the build directory.
-
Run the following command to build a clean, production version of the app.
yarn build
This command creates a directory called build inside of the client directory.
-
Chnage directory to the project root directory (running-with-swag).
-
Commit changes to git (if not done already).
-
Run the following command to deploy your changes:
firebase deploy
This command deploys the project to https://running-with-swag.firebaseapp.com.
- Node.js (https://nodejs.org/en/)
- Firebase Realtime Database (https://firebase.google.com/docs/database/)
- Firebase Hosting (https://firebase.google.com/docs/hosting/)
- Firebase Authentication with Google (https://firebase.google.com/docs/auth/)
- Tumblr API (https://www.tumblr.com/docs/en/api/v2)
- HTML5
- CSS
- Javascript (ES6)
- React (https://reactjs.org/)
- PrimeReact (UI component framework for React - https://www.primefaces.org/primereact/#/)
- CSS Grid system for page layout (https://github.com/crowdfavorite/css-grid)
- ESLint
Source code will be developed over time to handle bug fixes and new features.
The following is a list of potential enhancements for future code development.
- Add a running events page where runners can search for a list of upcoming races in their area.
- Add additional sign-in methods, including username/password, Facebook, and Twitter.
- Use Firebase Storage to allow runners to upload images to site.
- Add feature that allows runners to create and share local running events.
If you find an issue while using the app or have a request, log the issue or request here. These issues will be addressed in a future code update.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent