Repository files navigation

• Someexperience with JavaScript
• Someexperience with React
• Someexperience with Node.js
• Full Stack Foundations workshop(or similar experience)

• git v2.18 or greater
• NodeJS v20 or greater
• npm v8 or greater

All of these must be available in yourPATH. To verify things are set upproperly, you can run this:

git --versionnode --versionnpm --version

If you have trouble with any of these, learn more about the PATH environmentvariable and how to fix it here forwindows ormac/linux.

This is a pretty large project (it's actually many apps in one) so it can takeseveral minutes to get everything set up the first time. Please have a strongnetwork connection before running the setup and grab a snack.

Follow these steps to get this set up:

git clone https://github.com/epicweb-dev/web-forms.gitcd web-formsnpm run setup

If you experience errors here, please openan issue with as manydetails as you can offer.

You'll find all the exercises in theexercises directory. The structure of theworkshop apps is described below, but most of the time you should be able tosimply run the app and navigate around the different exercises using theapplication (there are even buttons to open the right exercise file right inyour editor).

The purpose of the exercise isnot for you to work through all the material.It's intended to get your brain thinking about the right questions to ask me asI walk through the material.

To get the app up and running (and really see if it worked), run:

npm start

Now open your browser to the address that's logged out for you and you're goodto get started!

The test script in thepackage.json runs the tests on the solutions (theseshould all pass). To run the tests against your own work, you simply open theproblem page and click the "Test" tab.

The application has several buttons which will launch your editor to the rightfile. There are a lot of files in this workshop so you'll be using this featurea lot to get to the right place at the right time.

This should just work™️ (it looks at your currently running processes andchooses the editor based on that). If it doesn't guess correctly, create a.env file in the root of this project and add an environment variable calledEPICSHOP_EDITOR with the value being set to the path to your editor'sexecutable. For example, if you're using VS Code on Windows, you'd add this toyour.env file:

EPICSHOP_EDITOR='"C:\Program Files\Microsoft VS Code\bin\code.cmd"'

Make certain that if the path includes spaces that you wrap the path in quotesas above (note the use of single quotes wrapping the double quotes!).

The value ofEPICSHOP_EDITOR should be the command that you would run in yourterminal to open your editor from the command line. This means, the first thingshould be the path to the executable for your editor (or the command if you haveone in yourPATH). So you may be able to get away with doing something assimple as this:

EPICSHOP_EDITOR=code

• exercises/*.*/README.md: Exercise background information
• exercises/*.*/*.problem.*/README.*.md: Problem Instructions
• exercises/*.*/*.problem.*/*.tsx: Exercise with Emoji helpers 👈 You spendmost of your time here.
• exercises/*.*/*.solution.*/*.tsx: Solved version

The purpose of the exercise isnot for you to work through all the material.It's intended to get your brain thinking about the right questions to ask me asI walk through the material.

Each exercise has comments in it to help you get through the exercise. These funemoji characters are here to help you.

• Kody the Koala 🐨 will tell you when there's something specific you shoulddo
• Lily the Life Jacket 🦺 will help you with any TypeScript-specific partsof the exercises
• Marty the Money Bag 💰 will give you specific tips (and sometimes code)along the way
• Nancy the Notepad 📝 will encourage you to take notes on what you'relearning
• Olivia the Owl 🦉 will give you useful tidbits/best practice notes
• Dominic the Document 📜 will give you links to useful documentation
• Barry the Bomb 💣 will be hanging around anywhere you need to blow stuffup (delete code)
• Matthew the Muscle 💪 will indicate that you're working with an exercise
• Chuck the Checkered Flag 🏁 will indicate that you're working with a final
• Peter the Product Manager 👨‍💼 helps us know what our users want
• Alfred the Alert 🚨 will occasionally show up in the test failures withpotential explanations for why the tests are failing
• Kellie the Co-worker 🧝‍♀️ your co-worker who sometimes does work ahead ofyour exercises

Each exercise has an Elaboration and Feedback link. Please fill that out afterthe exercise and instruction.

At the end of the workshop, please gohere to give overall feedback.