DEV Community

Cover image for Simple Tic Tac Toe App
Milan Radojević
Milan Radojević

Posted on

1

Simple Tic Tac Toe App

I publicly committed to the 100 Day of Code challenge today.

Liquid error: internal

After geting a bit familiar with react, I used create-react-app to scaffold this simple game. It was interesting making it.

You can view it here: https://mikister.github.io/tic-tac-toe-react-100daysofcode/

And here's the code: https://github.com/mikister/tic-tac-toe-react-100daysofcode

Interestingly the most problematic part was adding the app to github pages. Here a github gist that helped me with this:

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

Step 2

Make sure git knows about your subtree (the subfolder with your site).

git add dist && git commit -m "Initial dist subtree commit"

Step 3

Use subtree push to send it to the gh-pages branch on GitHub.

git subtree push --prefix dist origin gh-pages

Boom. If your folder isn’t called dist, then you’ll need to change that in each of the commands above.


If you do this on a regular basis, you could also create a script containing the following somewhere in your path:

#!/bin/sh
if [ -z "$1" ]
then
  echo "Which folder do you want to deploy to GitHub Pages?"
  exit 1
fi
git subtree push --prefix $1 origin gh-pages

Which lets you type commands like:

git gh-deploy path/to/your/site

Top comments (3)

Collapse
 
otarawri profile image
Omar yousif tarawri

nice. how many hours u took to finish this app

Collapse
 
mikister profile image
Milan Radojević

Something like 3 hours, which I think is good considering I wasted too much time fiddling with icons and later with github pages.

Collapse
 
akabaki profile image
akabaki • Edited

Hello there... the link to the github code repository is broken. Do you still have the code handy to repost it? Thank you!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs