About DevMoji

DevMoji was created by Christopher Conway. As a fresh bootcamp graduate, one of the most daunting goals was to contribute to opensource. In an effort to tackle this problem for other developers facing the same experience - he created DevMoji.

It provides a straight-forward way to contribute to opensource in a safe, risk-free environment that provides ample feedback and a way to actually see your contribution on the application.

Please consider contributing to the project and seeing your own prompt/answer on the application!

Contributing

Fork this repository

Fork this repository by clicking on the fork button on the top of the page. This will create a copy of this repository on your account.

Clone the repository

Now clone the forked repository to your machine. Go to your GitHub account, open the forked repository, click on the code button and then click the copy to clipboard icon.

Open a terminal and run the following git command:

git clone url-you-just-copied where url-you-just-copied is replaced with the url to this repository (your fork of this project). See the previous steps to obtain the url.

Create a branch

Change to the repository directory on your computer (if you are not already there) of the project you cloned:

cd devmoji

Now create a branch using the git checkout command:

git checkout -b your-branch-name

For example:

git checkout -b new-prompt-conwaycj

Add changes to Data.tsx file

Contribution requirements:

• Your contribution MUST match our style guidelines. Please ensure there are not drastic formatting changes.

• Please make prompts somewhat ambiguous. Obvious prompts may be requested to be changed.

• Limit the amount of prompts you add to 2.

Obvious example:

{
  prompt: ["everyone", "loves", <CoffeeEmoji />],
  answer: "everyone loves coffee",
}

Ambiguous version:

{
  prompt: [<GroupEmoji/>, <HeartEmoji/>, <CoffeeEmoji/>],
  answer: "everyone loves coffee",
}

prompt key:

• Must be an array. 3 items max. Use any number of emojis - either use emojis from your device or find one from any of the listed sites: MaterialUI
  React Icons

• Choosing a new emoji
  In Data.tsx - make sure you import your emoji like the example below. The FROM location must match the library you're using.
  For example, React Icons Font Awesome has a different FROM location than Hero Icons

    //Font Awesome example:
    import { IconName } from "react-icons/fa";

• If I want to use an icon from "Hero Icons", but that import doesn't exist in Data.tsx - I must import it from that new location. The Import syntax will be in the "Hero Icons" section at the React Icons website.

  //Font Awesome Icons:
  import { IconName } from "react-icons/fa";
  //Hero Icons:
  import { IconName } from "react-icons/hi";

answer key:

• Must be a string. Use lowercase lettering. See the "star trek" example below.

• For example - your emojis are implying "star trek"

• The "answer" key would be 'star trek'

socials key:

• This is OPTIONAL. If you do not want links to your socials on the application, do not add a socials key.
• The socials key is an object with two key:value pairs. GHurl and LIurl. Provide a link to your GitHub and LinkedIn as a string.

Completed example with socials:

{
  prompt: [<Star/>, <RunningTrack/>],
  answer: "star trek",
  socials: {
    GHurl: 'https://github.com/ConwayCJ',
    LIurl: 'https://www.linkedin.com/in/conwaycj',
  }
}

Check your work

In the devmoji directory in your terminal, run npm run dev.

Play through the game or skip to the last prompt. If your contribution was successful it will appear on the last page before the confetti screen.

Put your answer in the input to check it was successful.

Committing & pushing changes

1. Before continuing these steps, make sure your changes meet the requirements of our style guidelines
2. Add the changed Data.tsx file in your terminal
3. Commit your changes with the message "add prompt your prompt here"
4. Push your changes to the branch you created earlier when doing the `git checkout` command
5. See below for an example

• Example add/commit/push workflow:

  If you're in the devmoji directory in your terminal:

    git add src/assets/Data.tsx
    git commit -m "Add prompt star trek"
    git push -u origin your-branch-name

Submit your changes for review

• If you go to your GitHub repository, you'll see a Compare & pull request button. Click on that button.

• You should now see a new screen to create a pull request.

---

1. Check that your message matches the description of your commit message: `add prompt your-prompt-here`
2. Click the "create pull request" button.

Thats it!

Upon seeing this screen, either your contribution will be accepted and merged into the main branch, or your contribution will receive feedback and changes will be requested.

1. In the case changes are requested, follow the same workflow to request and update your pull request.
2. If no changes have been requested, it will be merged into the production branch.

Thank you for contributing!

If the deployment is successful, there will be an option on the screen below to view a "preview" of your contribution before it goes to production!

Whats next? + Credits

• Congrats! You just completed the standard fork -> clone -> edit -> pull request workflow that you'll often encounter as a contributor!

• Please star this repository and share with someone you know who might enjoy contributing!

Roadmap

1. ☑ Implement the core functionality of the project.

2. ☑ Set up a GitHub repository and make it open source.

3. ☑ Create a detailed README file with instructions on how to contribute.

4. ☑ Add a "Credits" section for contributors' socials.

5. ☑ Style the project.

6. ⭕ Improve styling:

   • Change gradients on each page to something more distinct
   • Transition colors instead of a direct swap
   • Make getting a correct prompt more clear (replace X\O and bg color change)

7. ⭕ Enhance user experience by implementing features such as:

   • Tracking the number of prompts users have answered correctly & displaying unique win page.
   • Track progress using login/DB or local storage

Code Stack

The project is built using the following technologies and frameworks:

React	TypeScript	Vite	HTML5	CSS3	TailwindCSS