Project Introduction: Full Stack Foundations
The Full Stack Foundations workshop is designed to help individuals learn the essential tools and skills needed to build web applications. Through engaging exercises within a real-world application, participants are introduced to key concepts in web application development.
Prerequisites and System Requirements
To benefit from this workshop, users should have some foundational experience with JavaScript, TypeScript, React, and Node.js. This knowledge is crucial for understanding the exercises and working through the components of the workshop.
Participants should ensure their system meets the following requirements:
- Git version 2.18 or greater
- Node.js version 20 or greater
- npm version 8 or greater
These tools must be available in the system's PATH, allowing them to be accessed from the command line or terminal.
Setup Process
Setting up the Full Stack Foundations project is straightforward, though it may take time as it includes several applications. With a strong network connection and some patience, you can follow these steps to get started:
git clone --depth 1 https://github.com/epicweb-dev/full-stack-foundations.git
cd full-stack-foundations
npm run setup
If any errors arise during setup, participants are encouraged to report them by opening an issue with detailed information.
Exploring Exercises
The workshop is organized around various exercises located in the exercises directory. These activities are tailored to challenge participants' problem-solving skills, encouraging them to think deeply and ask pertinent questions as they progress.
- Exercise files contain the core learning material.
- Solution files provide a completed version for reference.
Running the Application
Participants will know their setup was successful when they can start the application using:
npm start
They should then open their browser at the specified address to commence their learning journey.
Testing and Editor Integration
The project includes a testing feature, ensuring solutions developed by users meet expected outcomes. Additionally, the application offers convenient buttons to launch the user's code editor at the appropriate files, streamlining the learning and development process.
If the editor doesn't open automatically, users can specify their editor path in a .env file at the root of the project. For example, if using VS Code on Windows, the following line can be added:
EPICSHOP_EDITOR='"C:\Program Files\Microsoft VS Code\bin\code.cmd"'
Emoji Guides
Fun and instructional emojis are scattered throughout the exercises to assist learning:
- Kody the Koala π¨ and Lily the Life Jacket π¦Ί guide users on specific actions and TypeScript elements.
- Marty the Money Bag π° and Nancy the Notepad π provide tips and note-taking prompts.
- Olivia the Owl π¦ shares best practices, while Dominic the Document π offers documentation links.
- Barry the Bomb π£ and Matthew the Muscle πͺ indicate where code edits are necessary.
- Chuck the Checkered Flag π and Peter the Product Manager π¨βπΌ help navigate final stages and user needs.
- Alfred the Alert π¨ and Kellie the Co-worker π§ββοΈ provide test insights and example completions.
Feedback and Improvement
Feedback is an integral part of the Full Stack Foundations workshop. After each exercise, participants are encouraged to fill out feedback forms. This information is used to enhance the workshop and address user needs effectively.
By following these guidelines and leveraging the resources offered, learners can gain valuable insights into full stack web development through the Full Stack Foundations workshop.