Travel Journal *1st try

Section 2 solo project for React in the Scrimba/FreeCodeCamp React tutorial - https://www.youtube.com/watch?v=bMknfKXIFA8 - first push completed on 10 Nov 2022 with 1 data - further improvements upcoming soon..

Table of contents

• Overview
  • Requirements
  • Screenshot
  • Links
  • Getting Started with Vite
• My process
  • Built with
  • What I learned
• Author
• Acknowledgements

Requirements

• Data array in a separate .js file
  • Title, description, price, cover image, rating, review count, location, open spots
• Use .map() and props
• Style & polished
• Mobile designed

Screenshots

Links

• Live Site URL: @Github
• Solution URL: @GitHub

Getting Started with Vite

This project created with ViteJS.

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• React.JS

What I learned

• Learned about props and mapping, and trying to figure out how to deploy site :

• Deploying site

• Create

.github/workflows/deploy.yml

• Inside deploy.yml

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v2
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v2
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

• Updating vite.config.js

 base: '/travel-journey-2022/',

• Due changes, solving the Img not displaying issues

Author

• Website - beau helmi

Acknowledgements

• Jethrosweb
• Scrimba Projects
• Figma Design
• xdelmo