Joshhortt / hundred-devs

100 Devs Bootcamp Next.js blog website tailwind css using Markdown for content.

https://hundred-devs.vercel.app

100DevsBootcamp

An online, completely free 30 week bootcamp meant to bring you from zero programming skills to employable Software Engineur. Please join the Discord Channel for the most up to date information.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

About The Project
Technologies Used
Getting Started
Roadmap
Contributing
Acknowledgments
Tailwind Nextjs Starter Blog
Quick Start Guide
Installation
Development
Extend - Customize
Post
Deploy
License
Contact

About The Project '100 Devs Bootcamp'

This fully free 30 week software engineering bootcamp started in January, but you can join anytime! Please follow everything on this page and then join the #catchup-crew on Discord! All of the past classes can be found here and all the materials can be found in the #follow-along-materials channel on Discord channel!

Most people who participated last cohort did not have a degree and had never coded before joining the bootcamp. By the end of program, they worked with real paid clients, contributed to open source software, voluntered with wonderful charities, built their own fullstack javascript projects, and ultimately landed jobs at companies like Amazon, Twitter, Chownow, other amazing startups, and dozens of companies across the globe.

Technologies Used

Getting Started

1. What is #100Devs?

It's a online, free, 30 week bootcamp, meant to bring anybody from zero programming skills to employable Software Engineur, taught by Leon Noel who also is the Managing Director of Engineering for Resilient Coders and is also a Distinguished Faculty Member at General Assembly were he teached how to code for the past 9 years.

2. When and where are classes hosted?

Tuesdays & Thursdays, 6:30PM - 9:30PM Eastern Time. They are hosted live on Twitch

3. When are office hours?

Sunday, 1:00PM Eastern Time. Office hours will normally go for 2-3 hours and are hosted live on Twitch.

4. How does the program work for a newcomer?

If you would like to join, please first complete these Signup taks.

Then fill out this form: https://forms.gle/A4fiw6rM4ukX1eJG7

And be sure to join the Discord channel, where all the course materials will be posted and you will find thausends of community memebers ready to help you on your engineering journey.

Make sure you agree to the rules (must click the green check mark) and click the icons in the #join-100Devs channel. This will give you full access and place you into House Hamilton to start for support!

Note that: If you don’t click the three icons, you will not see every channel on Discord.

You will be a part of Hamilton House, one of three ‘houses’ in this bootcamp. All of our materials will be posted in the discord for you to code along, get homework assignments, and get support from your peers.

Please tune in on Twitch to watch the lectures live. Any missed lectures can also be viewed on Twitch, or on Youtube.

5. What will we learnt?

All the fundamental skills you need to unlock a career as a software engineer. Also, the practical skills you need to learn HTML, CSS, Javascript, React, Node, Express, MongoDB, and Computer Science like Algorithms & Data Structures theory.

6. What will be expected from you?

If you want to gain the most of the course, you should attend class, do the assigned homework, get involved in networking, and participate in the provided coding challenges.

You will be asked to check-in for each class by retweeting a tweet on Leon's Twitter. This is how you take attendance.

You should expect to spend 10+ hours per week, outside of class, for practice/homework/networking/etc.

The biggest factor in your success is you. Work hard, ask for help when you need it, give help to others when you can, and stay positive. Stay healty and do exercise.

7. What equipment will you need?

You will need a functional computer, an internet browser, and some form of text editor. For text editors, I will use Visual Studio Code on stream, but Atom, Sublime Text, or any other text editor will do the work. I recommend using a second screen if you can.

8. How do you use Discord?

Please see the Discord beginner’s guide for help.

There are a lot of channels in the discord. Please try to post your messages in the channel that makes the most sense to ensure your message isn’t missed (for example, if you having an issue with a javascript question, post it in the #javascript-help channel).

The #100Devs family is big, so you may need to adjust your notification settings. Please see Discord’s guide to notifications for help.

9. How do you use Twitch? What are ‘channel points’?

Simply go here at class time to watch the live stream. You can ask questions directly in the Twitch chat.

Channel points are accumulated by watching the stream. They will be visible right below the chat bar. If you click there, you will see things you can redeem with your channel points, including resume reviews, portfolio reviews, mock interviews, and more! You can see Twitch’s official guide to channel points here.

10. What are the ‘houses’?

House Turing, House Hopper, and House Hamilton.

House Turing has access to Leon as a reference, resume and portfolio reviews, mock interviews, and a private house channel in the discord. Turing also has mandatory requirements of attendance, networking, and coding challenges. Failure to meet these requirements may result in being moved to House Hopper.

House Hopper can use channel points for reviews and interviews, and has their own private house channel in the discord. Those in House Hopper that would like to move to House Turing for the extra perks, please keep doing all of the obligations and as people move out of Turing, those in Hopper who are demonstrating dedication will be moved in.

House Hamilton has the flexibility to follow along with the bootcamp without the same level of commitment as Turing and Hopper. Hamilton can use their channel points for Turing benefits

11. What happens if you miss a stream, or want to catch up on a the old ones?

They will still be visible on Twitch here, and they will be up on YouTube within a few days here.

12. Where do you go when you have a question?

Please use the appropriate help channel on Discord. If you have something that can only be answered by Leon, then please use the #ask-Leon channel. You can also check out the #resources channel for helpful links. If you are looking for a specific resource, please ask.

Roadmap

See the open issues for a full list of proposed features (and known issues).

Contributing

Thanks for checking out the 100 Devs Sofware Engineuring Bootcamp Repo. Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this README better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

Acknowledgments

Use this space to list resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!

Tailwind Nextjs Starter Blog

This is a Next.js, Tailwind CSS blogging starter template. Probably the most feature-rich Next.js markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Check out the documentation below to get started.

Facing issues? Check the FAQ page and do a search on past issues. Feel free to open a new issue if none has been posted previously.

Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!

Quick Start Guide

Try installing the starter using the new Pliny project CLI:

npm i -g @pliny/cli
pliny new --template=starter-blog my-blog

It supports the updated version of the blog with Contentlayer, optional choice of TS/JS and different package managers as well as more modularized components which will be the basis of the template going forward.

Alternatively to stick with the current version, TypeScript and Contentlayer:

npx degit 'timlrx/tailwind-nextjs-starter-blog#contentlayer'

or JS (official support)

npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git

Personalize siteMetadata.js (site related information)
Modify the content security policy in next.config.js if you want to use any analytics provider or a commenting solution other than giscus.
Personalize authors/default.md (main author)
Modify projectsData.js
Modify headerNavLinks.js to customize navigation links
Add blog posts
Deploy on Vercel

Installation

npm install

Development

First, run the development server:

npm start

or

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Extend / Customize

data/siteMetadata.js - contains most of the site related information which should be modified for a user's need.

data/authors/default.md - default author information (required). Additional authors can be added as files in data/authors.

data/projectsData.js - data used to generate styled card on the projects page.

data/headerNavLinks.js - navigation links.

data/logo.svg - replace with your own logo.

data/blog - replace with your own blog posts.

public/static - store assets such as images and favicons.

tailwind.config.js and css/tailwind.css - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.

css/prism.css - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.

components/social-icons - to add other icons, simply copy an svg file from Simple Icons and map them in index.js. Other icons use heroicons.

components/MDXComponents.js - pass your own JSX code or React component by specifying it over here. You can then call them directly in the .mdx or .md file. By default, a custom link and image component is passed.

layouts - main templates used in pages.

pages - pages to route to. Read the Next.js documentation for more information.

next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.

Post

Frontmatter

Frontmatter follows Hugo's standards.

Currently 7 fields are supported.

title (required)
date (required)
tags (required, can be empty array)
lastmod (optional)
draft (optional)
summary (optional)
images (optional, if none provided defaults to socialBanner in siteMetadata config)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

Here's an example of a post's frontmatter:

---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

Compose

Run node ./scripts/compose.js to bootstrap a new post.

Follow the interactive prompt to generate a post with pre-filled front matter.

Deploy

Vercel
The easiest way to deploy the template is to use the Vercel Platform from the creators of Next.js. Check out the Next.js deployment documentation for more details.

Netlify Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), next/images, etc.

See Next.js on Netlify for suggested configuration values and more details.

GitHub Pages / Firebase etc.
As the template uses next/image for image optimization, additional configurations have to be made to deploy on other popular static hosting websites like Firebase or GitHub Pages. An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the next/image component with a standard <img> tag. See next/image documentation for more details.

The API routes used in the newsletter component cannot be used in a static site export. You will need to use a form API endpoint provider and substitute the route in the newsletter component accordingly. Other hosting platforms such as Netlify also offer alternative solutions - please refer to their docs for more information.

Google App Engine Apart from changes mentioned above for next/image, configurations should be changed based on recommendations here in order to set up the project for GAE deployment.

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

José Horta - @josh_hortt

My E-mail - joshhortt@yahoo.com

100 Devs Bootcamp Link: 100 Devs Bootcamp

About

100 Devs Bootcamp Next.js blog website tailwind css using Markdown for content.

https://hundred-devs.vercel.app

MIT License

Languages

Language:JavaScript 96.9%Language:CSS 2.4%Language:TeX 0.6%Language:Shell 0.1%