How to Write a
General Assembly (GA)
Software Engineering Immersive (SEI)
Coding Bootcamp
Project README
Written by Amar Pan, M.Ed.
Instructional Associate
This tutorial and template describes how to write a coding bootcamp project README in HTML and GitHub-flavored Markdown in 20 minutes or less.
<div align="center">
<h1>
:school_satchel: :school: MEET YOUR CLASSMATES :school: :school_satchel:
</h1>
<h3>https://meetyourclassmates.herokuapp.com/</h3>
<h5>Your Name</h5>
<a href="https://www.linkedin.com/in/username/" target="_blank">
<img
src="https://img.shields.io/badge/-@username-blue?style=flat&logo=Linkedin&logoColor=white"
/>
</a>
<h1>:pencil: Description</h1>
<p>
Meet Your Classmates is an Instagram-clone and hub where students can get to
know and relate to their peers via completion of short 3-question
mini-surveys. By learning about others' backgrounds, previous experiences, and
interests, an atmosphere of community is created that is conducive to higher
levels of learning and success.
</p>
</div>| Tips |
|---|
Integrate styling by using <div align="center"></div> to center text. |
| Add your deployed link directly to the top - many users won't scroll all the way down to find it. |
Use emojis by typing in :emojiname: Example: :school: ---> 🏫 Check out this list of available GitHub emojis. |
| While emojis show automatically on GitHub, to see them on VS Code one needs to install an extension like Markdown Emoji. Some emojis may also look completely different on VS Code than GitHub. |
Requirements: Screenshots of your app's landing page and any other pages of interest.
<details>
<summary>:bar_chart: ERD</summary>
| Description | Screenshot |
|:------------:|-----------|
| <h3>ERD</h3> | <img
src="https://``github.com/amarpan/meet-your-classmates/raw/main/public/Screenshots/ERD.MYC.png"
width="700"
/> |
</details>
<details>
<summary>:art: Wireframes</summary>
| Description | Screenshot |
|:-----------------:|-------------|
| <h3>Home Page</h3>| <img
src="https://github.com/amarpan/meet-your-classmates/raw/main/public/Screenshots/Homepage.Wireframe.MYC.png"
width="700"
/> |
| <h3 align="center">Profile Page</h3> | <img
src="https://github.com/amarpan/meet-your-classmates/raw/main/public/Screenshots/ProfilePage.Wireframe.MYC.png"
width="700"
/> |
</details>
<details open>
<summary>:gear: Functionality</summary>
| Description | Screenshot |
|:-------------:| -----------|
| <h3>Feed Page</h3> | <img
src="https://github.com/amarpan/meet-your-classmates/blob/main/public/Screenshots/FeedPage.png?raw=true"
width="700"
/> |
| <h3 align="center">Profile Page</h3> | <img
src="https://github.com/amarpan/meet-your-classmates/raw/main/public/Screenshots/ProfilePage.png"
width="700"
/> |
</details>| Tips |
|---|
| To set up a table use: |
Description | Screenshot | |
:----------:|------------| |
caption | image | |
Whatever is placed in between <details></details> will be hidden beneath a closed drop-down menu, until its arrow is clicked on. The title for this should be placed in between <summary></summary>. |
| To have a drop-down menu display by default without the user having to click it, add the word 'open' to the details tag. Example: <details> --> <details open> |
| Image dimensions can also be resized by specifying width and height. Example: <img src="" width="300" height="400"> |
## :computer: Technologies Used
A screenshot of your app's landing page and any other screenshots of interest.
| Tips | |
|---|---|
| Note: | Additional custom badges can be found at the shields.io website. |
| Note: | For a list of more colorful badges, check out this repository. |
Requirements:
- A link to the deployed app
- A link to the Trello board used for the project's planning that includes user stories, wireframes, and ERD
<h2>:fire: Getting Started</h2>
<h3>:calling: Instructions</h3>
<details open>
<summary>How to Create a Post</summary>
<ol>
<li>
Type in your answers to each of the 3 randomly-generated mini-survey
questions.
</li>
<li>
Click on "Add Survey" to post your responses so others may see them.
</li>
<li>Click on the "X" in the bottom-right corner to delete a post.</li>
</ol>
</details>
<details>
<summary>How to Interact With Others' Posts</summary>
<ol>
<li>
Posts may be "liked" or "disliked" by clicking on the thumbs up or down
button on their card.
</li>
<li>
To reveal the author of a post, hover over the "Who could it possibly be?"
button.
</li>
<li>
To see more posts by the same user, click on the revealed username and
profile picture.
</li>
</ol>
</details>
<details>
<h3>:link: Links</h3>
<summary>Trello Board</summary>
<a href="https://trello.com/b/x4ViComX/meet-your-classmates-project-4"
>https://trello.com/b/x4ViComX/meet-your-classmates-project-4</a
>
</details>
<details open>
<summary>Deployed Link (Heroku)</summary>
<a href="https://meetyourclassmates.herokuapp.com/"
>https://meetyourclassmates.herokuapp.com/</a
>
</details>| Tips | |
|---|---|
| Note: | Use numbered lists as opposed to lengthy paragraphs to make sure this section is easily readable. |
| Note: | Put your links in more drop-down menus using <details open> and <summary>. |
| Note: | Try to choose something simple and memorable when choosing your Heroku URL / link name. |
Requirements : Planned future enhancements (icebox items).
## :fast_forward: Next Steps
### Upcoming Features
- [x] Add gifs to animated sliding buttons
- [ ] Add comment functionality on posts to encourage discussion
- [ ] Add edit and update functionality for a user's profile
- [ ] ~~Add Tinder API Integration~~| Tips | |
|---|---|
| Note: | Try to avoid using the word "icebox," as most non-technical users probably won't know what this means. |
| Note: | Use bullet points rather than paragraphs to make it immediately clear what each new feature would be. |
<div align="center">
<img src="https://i.imgur.com/y2SPx4E.jpg" width="800" height="400" />
<h1 align="center">plantrade</h1>
</div>| Tips: | |
|---|---|
| Note: | Royalty-free stock photos can be found on Pexels, Pixabay, or Unsplash. |
| Note: | Free photo editing tools like Photopea can streamline the editing process with their ability to import images from URLs and export images directly into imgur. |
git commit -m ":pencil2: fix typo on cart page"
<pre>
<img src="https://i.imgur.com/NdzHyyX.png" width="700" height="500" />
<img src="https://i.imgur.com/XIxBAcO.png" width="700" height="500" />
<img src="https://i.imgur.com/tYVxWvF.png" width="700" height="500" />
<img src="https://i.imgur.com/vRjshke.png" width="700" height="500" />
<img src="https://i.imgur.com/qap5IXS.png" width="700" height="500" />
</pre>| Tips | |
|---|---|
| Note: | This works best with images of similar heights. |
Amar Pan - GA SEI Nov '21 - Portland, OR
Project #1 (P1): https://github.com/profpan396/simon-memory-game
Project #2 (P2): https://github.com/profpan396/review-my-project
Project #3 (P3): https://github.com/profpan396/ga-hw-tracker
Project #4 (P4): https://github.com/profpan396/meet-your-classmates
Parker Samuels - GA SEI Jun '22 - Detroit, MI
Roger Davila - GA SEI Jun '22 - San Francisco, CA
| Note: | For a quick introduction to Markdown writing format, check out this no-nonsense Markdown tutorial. |
| Note: | Read through the official GitHub-flavored Markdown documentation for further reference. |
| Name | Cohort | Title | Contribution |
|---|---|---|---|
| Amar Pan | GA SEIR Nov '21 Los Angeles |
Technical Writer @ Linode | Writing - Main Features |
| Neil Italia | GA SEIR Oct '21 Dallas |
User Interface Developer @ Lennox International | Writing - Optional Additions |
| Olivia Emery | GA WDI Nov '15 San Francisco |
Technical Writer @ Google | Editing |
| Mario Recinos | GA SEIR Dec '21 Los Angeles |
General Assembly Ambassador @ Career Karma | Outreach |
| Stephanie Lee | GA SEIR Nov '21 Los Angeles |
Sr. Instructional Associate @ General Assembly | Outreach |