moonshot

Please note that this README file outlines the frontend development of this application; if you require info on backend development please navigate to the README for moonshot-api

Moonshot (stylised completely in lowercase) is a web application built for the sharing and discussion around amateur astrophotography. This site has been designed to allow imagined users and visitors the ability to view photos uploaded by registered users of the site; registered users will also be able to create a personal profile and 'star' (that is, like) and comment on other users' posts.

LIVE LINK to Application
LIVE LINK to API
Note: to open links in a new tab, hold CTRL + Click

UX Design

The site is aimed at helping users to easily upload their personal photos of the night sky alongside relevant info such as what the photo shows, where/when it was taken, and what equipment was used. It also aims to give users the ability to view, star, and comment on the photos uploaded by other users of the site.

Strategy

Milestones & User Stories

This project was developed with 6 milestones (epics) in mind. From each of these milestones a number of dev goals and user stories were created, each one given a prioritisation using the MoSCoW method. The detail of these milestones, goals, and stories implemented in the final project is outlined below; further detail regarding sprints, MoSCoW designation and acceptance criteria (covered under Structure) are included on the GitHub Projects Kanban Board created for the project.

Milestone 1 - API & Admin Functionality

1.1 - Dev Goal: set up Django REST and its supporting libraries via the IDE in order for API development to begin
1.2 - User Story: as a Site Admin I want to be able to create and edit User Profiles so I can control user permissions on the frontend
1.3 - User Story: as a Site Admin I want to be able to review and edit Equipment Profiles for users so I can details on the frontend
1.4 - User Story: as a Site Admin I want to be able to review and edit Photo uploads so I can allow and control images on the frontend
1.5 - User Story: as a Site Admin I want to be able to review and edit Comments for so I can allow and control comments on the frontend
1.6 - User Story: as a Site Admin I want to be able to review and edit Star ratings (photo ratings) by users so I can allow and control star ratings on the frontend
1.7 - User Story: as a Site Admin I want to have access to search and filtering tools on the backend so I can find and edit particular data more easily
1.8 - Dev Goal: create an early API deployment to Heroku to ensure all is working from the very start and allow continuous testing throughout production

Milestone 2 - Frontend Navigation

2.1 - Dev Goal: set up ReactJS and its supporting libraries via the IDE and create an early deployment to Heroku in for frontend development to begin and to ensure all is working from the very start
2.2 - User Story: as a Site Visitor/User I want access to navigation links at the top of every page so I can easily move between different areas of the site
2.3 - User Story: as a Site Visitor I want to easily access a sign up page so I can become a registered user and upload my own content/directly participate with other users of the site
2.4 - User Story: as a Site User I want to easily access a sign in page so I can use the full functionality of the site

Milestone 3 - User Access

3.1 - User Story: as a Site User I want view additional navigational links so that I can access those areas of the site only available to registered users
3.2 - User Story: as a Site User I want to remain logged in to the site until I choose otherwise so that my experience is not interrupted by having to continuously re-enter my username and password
3.3 - User Story: as a Site Visitor/User I want have a clear indication as to whether or not I am logged in/logged out so I can easily discern if I need to sign up/sign in before accessing certain pages
3.4 - User Story: as a Site User I want to be able to sign out from my account so that I know my account cannot be accessed by unauthorised persons

Milestone 4 - Photo Uploads

4.1 - User Story: as a Site User I want to be able to upload my own astrological photos to the site so that they are shared on the home page and commented on/upvoted by others
4.2 - User Story: as a Site User I want to include specific details such as keywords, date, time, location etc. with my uploaded photos so that those details can be displayed alongside the photo for the benefit of other users
4.3 - User Story: as a Site User I want to be able to update the details of any photo I have added so that I can correct mistakes or add new information if required
4.4 - User Story: as a Site User I want to be able to delete any photo I have added so that I can remove my photos from the site if I so desire
4.5 - Dev Goal: write defensive code to prevent anyone from accessing the ability to update/delete posts which were not specifically uploaded by them

Milestone 5 - Home & Profile Pages

5.1 - User Story: as a Site Visitor/User I want to view all user photos from the home page so I can see the latest content when first accessing the site
5.2 - User Story: as a Site User I want to be able to continuously scroll through photos so that I don't have to navigate between and reload multiple pages
5.3 - User Story: as a Site User I want to be able to search photos with keywords (title, feature, user, etc.) so I can view content specifically related to those keywords
5.4 - User Story: as a Site User I want to be able to select an individual photo from the feed so I can view details, comments, and upvotes directly associated with that photo
5.5 - User Story: as a Site User I want to be able to access a personalised profile page so that I can add an avatar, personal bio and equipment details

Milestone 6 - Community Interaction

6.1 User Story: as a Site User I want to be able to upvote other users photos so that I can show my appreciation for their photography
6.2 User Story: as a Site User I want to be able to comment on other users photos so that I can ask questions and/or start a discussion about the photo
6.3 - User Story: as a Site User I want to view a feed of those photos I've upvoted so I have easy access to those posts I've shown a particular interest in
6.4 - User Story: as a Site User I want to view a feed of those photos I've commented on so I have easy access to posts where I am involved in a discussion thread

Scope

Using these milestones, goals, and stories to guide my thinking, the following was planned as the Scope of the project:

Responsive Design:
- Resizing on all devices from 320px upwards (consideration for 280px+ also given)
- Toggle menu for navbar links at smaller sizes
Home page displaying the latest uploads and links appropriate to logged-out/in status (for * see below):
- Home (available to all users)
- Sign Up (logged-out)
- Sign In (logged-out)
- Upload (logged-in)
- Profile* (logged-in)
- Gear* (logged-in)
- Account* (logged-in)
- Sign Out* (logged-in)
Features appearing throughout the site:
- Routing to prevent complete page reload, espeically with filters on photo pages
- Gallery with 'masonry' layout for photo feeds (Home, Profile)
- Infinite scroll on photo feeds (Home, Profile)
- Ability to search for photos using filters/search bar (Home signed-in, Profile)
- Ability to star (like)/comment on other users' photos
- Pages marked * above in a navbar dropdown menu when viewed on medium/large screens
- Stylised 404 page
Reusable components used to build the site:
- Navbar component at the top of every page to guide the user through the site
- Asset component for image placeholding on forms and as a photo loading icon
- Photo Card component to display photos on the home page and their individual pages
- Filter component used in conjunction with Routes to produce filtered photo views
- Comment component which can be reimplemented everytime a user leaves a comment
- Avatar component appearing in the navbar, comments section, and on user photos/profiles
- Redirect hook used to handle defensive navigation for account assets
- Wiewport Width hook used to handle responsiveness logic on various pages
- Context code used to fetch the status/details of the currently signed-in user throughout the site

Structure

With Strategy and Scope now in place, focus shifted to setting acceptance criteria for each of the above, thereby informing exactly what features to include as part of the project. These acceptance criteria were added to each Dev Goal and User Story on the aforementioned Kanban board to act as an insurance that task would be completed to the fullest extent needed.

Features/Components

Hovering over a reference (Ref) number below will display a description of that Dev Goal/User Story while clicking the link will return you to the relevant Milestone section of this document.

Milestone	Ref	Type	Acceptance Criteria/Features
API	1.1	Dev Goal	Set up GitPod workspace Install LTS version of Django Start project 'moonshot_api' Install Cloudinary and Pillow modules Set up env.py
API	1.2	User Story	Create UserProfile model Create UserProfile serializer Create UserProfile GET and PUT views Implement permissions for editing
API	1.3	User Story	Create EquipmentProfile model Create EquipmentProfile serializer Create EquipmentProfile GET and PUT views Update fields in Photo model and serializer
API	1.4	User Story	Create Photo model Create Photo serializer Add validation to prevent large file sizes/dimensions Create Photo GET, POST, PUT and DELETE views
API	1.5	User Story	Create Comment model Create Comment serializer Create Comment GET, POST, PUT and DELETE functionality Implement permissions for editing
API	1.6	User Story	Create Star model Create Star serializer Create Star GET, POST, PUT and DELETE views Implement permissions for editing
API	1.7	User Story	Install django-filter module Add search and filter features to User Profiles Add search and filter features to Photos Add search and filter features to Comments
API	1.8	Dev Goal	Install django-rest-auth, all-auth and simpleJWT libraries Update settings.py and urls.py and migrate changes Migrate to PostgreSQL Deploy to Heroku
Navigation	2.1	Dev Goal	Set up GitPod workspace and install npm Install Bootstrap for React Test App.js with h1 text and Button component Deploy to Heroku
Navigation	2.2	User Story	Create NavBar.js component Create Home, Sign Up and Sign In links Add Bootstrap styling and icons
Navigation	2.3	User Story	Connect frontend to moonshot-api using axios Add basic structure including Form component Add code to handle form events and errors Add custom styles using CSS
Navigation	2.4	User Story	Add basic structure including Form component Add code to handle form events and errors Connect custom styles coded using CSS
Access	3.1	User Story	Add Upload, Profile, and Sign Out links Add code to set currentUser and related queries Add code to only show links when signed in
Access	3.2	User Story	Add axios request interceptor Add axios response interceptor
Access	3.3	User Story	Create Avatar component and styling Display username and avatar in navbar
Access	3.4	Dev Goal	Add code to Sign Out link
Photos	4.1	User Story	Create form with relevant fields Add code showing photo preview Connect form to API Add alerts for errors Style form to display correctly
Photos	4.2	User Story	Create Photo page and connect to API Add code for title, user and image display Add code to display photo information Add code to display number of stars/comments Style the Photo Page and Photo Card
Photos	4.3	User Story	Create form fields for editing post Retrieve details from API to pre-populate fields Add code to prevent unauthorised users from accessing form
Photos	4.4	User Story	Create delete button only visible to photo owner Create confirmation modal to ensure deletion is wanted Add code to remove photo from the database Style created components
Photos	4.5	Dev Goal	Create useRedirect hook Add hook to relevant pages to redirect users
Pages	5.1	User Story	Add photo feed to display user photos Add infinite scroll to photos Style photo feed using react-responsive-masonry
Pages	5.2	User Story	Install react-infinite-scroll-component Add Infinite Scroll component to PhotoFeed Create reusable getMoreData utility and add to infinite scroll
Pages	5.3	User Story	Add search bar to photo feed Add code to connect input field to API Style search bar
Pages	5.4	User Story	Add link to photos in Home Page feed Display selected photo on its own page Display full details not shown on the Home Page feed Display Edit & Delete buttons for owner of the photo
Pages	5.5	User Story	Dedicated profile page for user Display of user's photos Details regarding user Gear page to edit and update details Account page to edit and update details
Interaction	6.1	User Story	Prevent user from adding a star to their own photo Allow user to add a star to other users' photos Allow user to remove star from other users' photos Increment/decrement star count accordingly
Interaction	6.2	User Story	Add a form to let users create comments Show all comments made on Photo Page Allow users to edit/delete comments Add infinite scroll to comments Style comment forms and displays
Interaction	6.3	User Story	Add filter buttons to signed in home page Add route to connect to API and filter correct content Style filter buttons
Interaction	6.4	User Story	Add filter buttons to signed in home page Add route to connect to API and filter correct content Style filter buttons

Skeleton

Wireframe Models

Now that specific features had been decided upon, a wireframing tool was used to give guidance as to how these features would look in practice. All of the site-design models which follow can be viewed on one page using the following link

Logged-Out Pages

Home (logged-out)
Sign Up
Sign In

Logged-In Pages

Home (logged-in)
Upload
Photo Detail
Profile
Gear/Account Forms

Surface

With wireframe and database models in place, actual features of the site could now be coded using HTML, Bootstrap for ReactJS, CSS, and JavaScript JSX & React, all according to the criteria listed above.

Design & Typography

Poppins was chosen as the font for h1 and h2 elements throughout the site to give a refined, rounded look to major headings
All other text on the site is styled using Barlow to provide a minimalist, narrower-styled contrast to the headings and be clearly legible for larger portions of text
The main colours selected for the site were chosen as reflection of elements often associated with space and the sky, but choosing in favour of deep blues over black to provide a nicer contrast for users. Specifically these colours and their hexadecimal codes are:
- Oxford Blue variant #05162E
- Gunmetal Green variant #0C2A33
- Goldenrod #DAA520
- Whitesmoke #F5F5F5
- Dim Grey #696969
The site logo was chosen as an abstract representation of the moon, while a full-moon icon along with a single 'm' is used as the favicon for the site.

Features & Components Implemented

Each of the following implementations was added in response to the user stories and acceptance criteria above, details of which are provided below each feature heading for easy reference.

Navbar & Toggler

• 2.2 - User Story: as a Site Visitor/User I want access to navigation links at the top of every page so I can easily move between different areas of the site
• 2.3 - User Story: as a Site Visitor I want to easily access a sign up page so I can become a registered user and upload my own content/directly participate with other users of the site
• 2.4 - User Story: as a Site User I want to easily access a sign in page so I can use the full functionality of the site
• 3.1 - User Story: as a Site User I want view additional navigational links so that I can access those areas of the site only available to registered users
• 3.3 - User Story: as a Site Visitor/User I want have a clear indication as to whether or not I am logged in/logged out so I can easily discern if I need to sign up/sign in before accessing certain pages
• 3.4 - User Story: as a Site User I want to be able to sign out from my account so that I know my account cannot be accessed by unauthorised persons

The Navbar component is rendered at launch then adjusts conditionally as the user navigates the site
Links provided to each page of the site for easy navigation
Links alter depending on signed-in/signed-out status
Navbar remains fixed to top of screen for constant access to links, even when scrolling
Navbar dropdown appears when signed-in and viewing 767px+ width to display links neatly
Navbar toggler appears at screen sizes <767px to preserve well-formatted layout
Navbar displays username and reusable Avatar component on dropdown when user is signed-in
Sign Out link restyled on toggler to continue displaying the username
Reusable Avatar component is hidden at screen <315px to preserve good formatting

Home Page

• 5.1 - User Story: as a Site Visitor/User I want to view all user photos from the home page so I can see the latest content when first accessing the site
• 5.2 - User Story: as a Site User I want to be able to continuously scroll through photos so that I don't have to navigate between and reload multiple pages
• 5.3 - User Story: as a Site User I want to be able to search photos with keywords (title, feature, user, etc.) so I can view content specifically related to those keywords
• 5.4 - User Story: as a Site User I want to be able to select an individual photo from the feed so I can view details, comments, and upvotes directly associated with that photo
• 6.1 User Story: as a Site User I want to be able to upvote other users photos so that I can show my appreciation for their photography
• 6.3 - User Story: as a Site User I want to view a feed of those photos I've upvoted so I have easy access to those posts I've shown a particular interest in
• 6.4 - User Story: as a Site User I want to view a feed of those photos I've commented on so I have easy access to posts where I am involved in a discussion thread

Signed-out users will see a welcome message displayed as the page's header
Signed-in users will see feed filters and a description as the page's header
Both views use the adaptable Photo Feed page which can be called with different filters for different views
Anytime the photo feed is called it displays using a responsive 'masonry' layout and infinite scroll component
The reusable Asset component is called while photos are loading in the form of a 'loading-dot' animation along with text of 'Loading images...'
The Photo Feed page also renders a search bar just below the page header
Further filtering is achieved with the Filters component in the signed-in view
Each photo is rendered using a reusable Photo Card component which allows for the adding of stars and access to individual user profiles
Each photo can be clicked directly to direct the user to an individual page for the image outlining photo details (see Photo Details below)

Sign Up/In

• 2.3 - User Story: as a Site Visitor I want to easily access a sign up page so I can become a registered user and upload my own content/directly participate with other users of the site
• 2.4 - User Story: as a Site User I want to easily access a sign in page so I can use the full functionality of the site
• 3.2 - User Story: as a Site User I want to remain logged in to the site until I choose otherwise so that my experience is not interrupted by having to continuously re-enter my username and password

Simple forms allow the user to quickly enter details and sign up/sign in to the site
Links below each form help redirect the user if they have initially selected the incorrect access form
Stylised success/error messages ('toasts') appear on clicking 'Submit' to provide immediate feedback from the form to the user
Field specific alerts let the user know of any specific issue with the data they have entered
JWTs are used to prevent the user from having to log in every 5 minutes or so

Upload/Edit Photo

• 4.1 - User Story: as a Site User I want to be able to upload my own astrological photos to the site so that they are shared on the home page and commented on/upvoted by others
• 4.2 - User Story: as a Site User I want to include specific details such as keywords, date, time, location etc. with my uploaded photos so that those details can be displayed alongside the photo for the benefit of other users
• 4.3 - User Story: as a Site User I want to be able to edit the details of any photo I have added so that I can correct mistakes or add new information if required

Image placeholder implemented with reusable Asset component to allow preview once image is selected by user
Different field types (file, text, textarea, date, time) direct the user as to what input to provide
Fields relating to equipment autofill according to details added by the user in the gear profile (see Gear/Account Detail Forms below)
Edit form prevents user from changing image, only details, so that stars and comments remain relevant
Stylised success/upload/error messages ('toasts') appear on clicking 'Submit' to provide immediate feedback from the form to the user
Field specific alerts let the user know of any specific issue with the data they have entered

Photo Details

• 4.2 - User Story: as a Site User I want to include specific details such as keywords, date, time, location etc. with my uploaded photos so that those details can be displayed alongside the photo for the benefit of other users
• 4.3 - User Story: as a Site User I want to be able to update the details of any photo I have added so that I can correct mistakes or add new information if required
• 4.4 - User Story: as a Site User I want to be able to delete any photo I have added so that I can remove my photos from the site if I so desire
• 4.5 - Dev Goal: write defensive code to prevent anyone from accessing the ability to update/delete posts which were not specifically uploaded by them
• 6.1 User Story: as a Site User I want to be able to upvote other users photos so that I can show my appreciation for their photography

The reusable PhotoCard component renders the image along with various details entered by the user
As with the home/profile pages, signed-in non-owners can click to add a star to the image
If the photo belongs to the sign-in user, 'Edit' and 'Delete' buttons will also appear above the image
Selecting 'Edit' redirects the user to the relevant form with pre-populated fields for the photo
Selecting 'Delete' will display a confirmation modal to help prevent accidental deletion

Photo Comments

• 6.2 User Story: as a Site User I want to be able to comment on other users photos so that I can ask questions and/or start a discussion about the photo

The reusable Comment component renders a comment form and all user comments below the related image
Clicking the 'add' button is not possible until text has actually been added to the form
Adding a comment causes a Comment component with the relevant info to immediately display below the Add Comment form
Comments are displayed with the reusable Avatar component allowing access to that user's profile
Clicking 'Edit' below an owned comment caused the form to render in place so changes can be made

Profile

• 5.5 - User Story: as a Site User I want to be able to access a personalised profile page so that I can add an avatar, personal bio and equipment details

A profile specific avatar is displayed using the reusable Avatar component
Personal and equipment details of the particular user are also displayed as a header
As with the home page above, a filtered photo feed (specific to the displayed user) is used to render the rest of the page
The reusable Asset component is called while photos are loading in the form of a 'loading-dot' animation along with text of 'Loading images...'
As before, each photo is rendered using a reusable Photo Card component which allows for the adding of stars and access to an individual page for the image outlining details (see Photo Details above)

Gear/Account Detail Forms

• 5.5 - User Story: as a Site User I want to be able to access a personalised profile page so that I can add an avatar, personal bio and equipment details

Gear form allows user to set their favoured lens and camera along with any other equipment
Gear info set using this form is displayed on the user's profile and auto-filled in the upload form
Account form allows user to update personal image in reusable Avatar component as well as name and personal details
Account info set reusing this form is displayed on the user's profile
Stylised success/error messages ('toasts') appear on clicking 'Save' to provide immediate feedback from the form to the user
Field specific alerts let the user know of any specific issue with the data they have entered

404 Error Page

The 404 page displays when the user tries to access a non-existent page
This page uses the reusable Asset component to display the no-results.png image alongside info text

Features to be implemented

The following features have been identified as long-term goals which bring value to the UX; however, they have not been implemented at this stage as they would require a significant time investment, thereby delaying vital other features of the site, or a level of programming knowledge which I haven't yet developed.

Following/unfollowing other users: requires a new model at the backend and extensive work on the frontend which was not within the time capabilities of the initial project

Technology & Resources

Technologies Used

In order to code and design these features and components the following technologies were utilised:

Dependencies
- axios: 0.21.4
- bootstrap: 4.6.0
- jwt-decode: 3.1.2
- moment: 2.30.1
- node: 16.20.2
- react: 17.0.2
- react-bootstrap: 2.10.0
- react-dom: 17.0.2
- react-icons: 5.0.1
- react-infinite-scroll-component: 6.1.0
- react-moment: 1.1.3
- react-responsive-masonry: 2.1.7
- react-router-dom: 5.3.0
- react-scripts: 4.0.3
- react-toastify: 8.1.0
- web-vitals: 1.1.2
Node
- Used as package manager to install dependencies
Axios
- Used as the HTTP Client for the browser and Node.js
JWTDecode
- Used to decode JSON web tokens setn between frontend and backend
ReactJS
- Used as the JavaScript library in the development of this project
Heroku
- Used as the cloud-based deployment platform for this project
ElephantSQL
- Used as the database hosting service
HTML
- Used for smaller static elements
React Bootstrap
- Used as the main means of design layout and formatting throughout the site
CSS
- Used to modify Bootstrap behaviour where required and create additional custom stylings

Packages Used (frontend & backend)

Gitpod used to code the site and transfer files between the editor and the repository
GitHub used to store the files for this project
Cacoo used to develop the wireframe models for the site design
Lucid Chart used to create the database diagram (see backend README)
Google Fonts used to style the text throughout the site
Coolors used to help create the colour scheme
React Icons used to display the icons used throughout the site
React Toastify used to create the success/uploading/error pop-ups throughout the site
Infinite Scroll used to prevent pagination of photo pages and allow continuous browsing of content
Responsive Masonary used to create a responsive gallery layout of images on photo feed pages
Moment used to correctly format date and time values on Photo Detail pages
Markdown Table Generator used to create tables for documentation
PowerPoint, MS Paint, and the Windows Photo app used to produce image files for documentation

Reference Materials

Rescript post by Ferdinand Steenkamp referenced for creating useViewportWidth() hook
Documentation for similar project by Asia Wi referenced frequently when creating the READ.md and TESTING.md files on both frontend and backend repos
Code Institute course materials and walkthrough projects provided many reference points for implementing features of this project
Resources used are directly referenced within code where appropriate

Testing

Manual and automated testing undertaken for this project can be viewed in the separate TESTING.md file (Use CTRL + Click to this or any of the following links in a new tab/window). You can also navigate to a specific area of the file by selecting one of the headings below:

Frontend Testing Contents

Deployment

Heroku Deployment (frontend & backend)

This site was deployed to and is currently hosted on the Heroku platform. The steps for deploying to Heroku, using ElephantSQL as the database host, are as follows:

Cloudinary Setup

Navigate to Cloudinary and create an account/log in
Navigate to 'Programmable Media' and then 'Dashboard'
Copy the value called 'API environment variable'

ElephantSQL Setup

Navigate to ElephantSQL and create an account/log in
Click 'Create New Instance' in the top right
Enter an Instance/Database name, choose a Plan (free version will suffice) then click 'Select Region'
Select a region from the dropdown, click 'Review' and then 'Create instance'
Return to the dashboard and click on the instance name
In the URL section click the copy icon to copy the database URL

Backend Setup

In the backend repo navigate to/create a file named 'env.py'
Add the following code, replacing <mycloudinaryurl> with your personal link from Cloudinary, <mydatabaseurl> with the URL copied from ElephantSQL and, <mykey> with a string of your choice then save the file:
```
import os

os.environ['CLOUDINARY_URL']=<mycloudinaryurl>
os.environ["DATABASE_URL"]=<mydatabaseurl>
os.environ["SECRET_KEY"]=<mykey>
```
Open 'settings.py' and replace any current instance of the SECRET_KEY variable with:
```
SECRET_KEY = os.environ.get('SECRET_KEY')
```

Replace the DATABASES variable with

DATABASES = {
  'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))
  }

Save the file then run python manage.py migrate in the terminal
Commit and push these changes to the repository

Backend Heroku Setup

Navigate to Heroku and create an account/log in
Click 'New' in the top right and select 'Create New App'
Enter an App name (must be unique), choose a region, and then click 'Create app'
Select 'Settings' in the menu bar
Click 'Reveal Config Vars' and add the following:
- CLOUDINARY_URL: the CLOUDINARY_URL copied from Cloudinary
- DATABASE_URL: the DATABASE_URL copied from ElephantSQL
- SECRET_KEY: The SECRET_KEY string you created
- PORT: 8000
Click 'Deploy' in the menu bar tab then 'GitHub' under 'Deployment method'
Select the repository you want to deploy and click 'Connect'
Scroll down and click 'Deploy Branch' to complete the process (note the deployed URL)

Frontend Setup

In the project workspace, navigate to/create a file named 'Procfile' (remember the capital 'P') and add the code web: serve -s build
Install axios (if not already done) using the command npm install axios and create a folder/file called axios/axiosDefaults under src
Add the following code, replacing <myapiurl> with the deployed API URL from step 23: ``` JSX import axios from 'axios';

axios.defaults.baseURL = ''; axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; axios.defaults.withCredentials = true;

export const axiosReq = axios.create(); export const axiosRes = axios.create(); ```
Import this file to App.js before saving, committing and pushing changes to repo

Frontend Heroku Setup

Navigate to Heroku and log in
Click 'New' in the top right and select 'Create New App'
Enter an App name (must be unique), choose a region, and then click 'Create app'
Click 'Deploy' in the menu bar tab then 'GitHub' under 'Deployment method'
Select the repository you want to deploy and click 'Connect'
Scroll down and click 'Deploy Branch' to complete the process

Forking the Repository

Login to/create your GitHub account
Navigate to the moonshot GitHub Repository: https://github.com/ndsurgenor/moonshot
Towards the top right, under the main banner, click 'Fork'
Adjust the form fields if desired, then click 'Create fork' to finish Repeat these steps for the moonshot-api repo if required, as described in backend README

Cloning the Repository/Running Locally

Login to/create your GitHub account
Navigate to the moonshot Repository: https://github.com/ndsurgenor/moonshot
Click the '<> Code' dropdown button and ensure 'HTTPS' is selected
Click the copy icon (two overlapped squares) beside the repository URL
Open your local IDE and create a new project, ensuring git is installed
Run git clone copied-git-url in the terminal to finish Repeat these steps for the moonshot-api repo if required, as described in backend README

Credits & Acknowledgements

All photos taken from Pexels website and directly accredited to the following users (links point to specific photos):
useViewportWidth() hook adapted from code by Ferdinand Steenkamp
README.md and TESTING.md structure/outline adapted from Asia Wi
Many thanks to Kelly Hutchinson from the Code Institute Slack channel for her help in working through bugs encountered during development
Many thanks to my Code Institute tutor Daisy McGirr for her guidance, support, debugging, and every other effort in helping me to build this project

Name		Name	Last commit message	Last commit date
Latest commit History 192 Commits
build		build
docs		docs
public		public
src		src
.gitignore		.gitignore
Procfile		Procfile
README.md		README.md
TESTING.md		TESTING.md
package-lock.json		package-lock.json
package.json		package.json

ndsurgenor/moonshot

Folders and files

Latest commit

History

Repository files navigation