Welcome to my YouTube channel! 🎉 In this channel, I share exciting content related to web development. Whether you're interested in Angular, Javascript, or Productivity tips, you'll find something valuable here. YouTube Channel
I'm Sam, and I'm passionate about product engineering and web development. I create videos that will help you learn web development.
- [ Angular ]: [Learn the fundamentals. I explained everything you need to get started with this JavaScript framework written in TypeScript. It is the web development framework for building the future. works at any scale. Loved by millions. Build for everyone. open-source framework for building single-page client applications using HTML and TypeScript.]
- [ Javascript ]: [JavaScript is a powerful programming language that can add interactivity to a website. JavaScript is easy to learn. It's the foundation of frontend web development.]
- [ Career Tips ]: [self-assessment, goal setting, action planning, implementation, and refinement. By following these steps, you can develop a road map for achieving your career goals. Tips to improve your career development. Cultivating a beginner's mindset is a critical part of career growth. critical part of your professional growth.]
- [ Common Errors ]: [Mistakes to Avoid in Software Development Projects.]
- [ Development Tools ]: [Top Software Development Tools List.]
- [ Typescript ]: [TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors. TypeScript can help enhance and improve your web development projects.]
- [ Git & GitHub ]: [GitHub is where over 100 million developers shape the future of software together. Contribute to the open-source community and manage Git repositories. This practical guide gets you to jump right into using GitHub, learning the basics of Git. Git and GitHub are two of the most essential tools in the world of software development.]
- [ Video Conferencing Tool ]: [Unlock the potential of video conferencing software development. Dive into our guide for insights on key features and cost factors. If you're looking to integrate video communication into your app or planning to build a video streaming/conference app from scratch, create a fully customized audio & video conferencing app.]
Simple nextjs app to demo features.
http://localhost:3000/ API return full html
Integrating Next.js with Storybook npx sb init --builder webpack5 Before you run your stories, you need to tweak .eslintrc.json to allow it to read Storybook as a plugin:
{ "extends": [ "plugin:storybook/recommended", "next", "next/core-web-vitals", "eslint:recommended" ], "globals": { "React": "readonly" }, "overrides": [ { "files": ["*.stories.@(ts|tsx|js|jsx|mjs|cjs)"] } ], "rules": { "no-unused-vars": "warn" } }
This is a brief description of the project, including its purpose and key features.
Below are the key routes available in the application:
-
Homepage/Post Page:
Accessible via: http://localhost:3000/posts/first-post
This route displays the content of the first post. -
API Endpoint (Hello):
Accessible via: http://localhost:3000/api/hello
This route returns a sample message from the API. http://localhost:3000/api/user/1 -
Signup Page:
Accessible via: http://localhost:3000/signup
This route provides the signup form for new users. -
Signin Page:
Accessible via: http://localhost:3000/signin
This route provides the signin form for existing users.
-
Install the dependencies:
npm install
-
Start the deployment server :
npm run dev
-
Requirements
Docker -
Getting Started
-
Clone the repository:
git clone https://github.com/reactjsdevelopment/nextjs-basic.git cd nextjs-basic -
run cmd
docker-compose up
-
check
localhost:3000
Don't miss out on new videos! Subscribe to my channel and hit the notification bell 🔔 to receive updates whenever I upload fresh content. Let's learn, laugh, and explore together!
- YouTube: YouTube Channel Link
- Facebook: Facebook Page Link
- Instagram: Instagram Page Link
Feel free to reach out, comment on videos, and share your thoughts. I appreciate your support! 🙌
This project is licensed under the MIT License.
If you have any questions or need further assistance, feel free to ask! 🚀
clone the forked repository to your system. Go to your GitHub account, open the forked repository, click on the code button and then clone the repository. If you want to use the terminal, use the following commands after you fork the repository, open the terminal type the given command
git clone repo url
create a branch on your local repository to solve a problem.
Terminal commands
git checkout -b your_new_branch_name
add your changes(folder) to that branch. Make necessary changes and commit those changes. Terminal commands
git add .
git commit -m "your-commit-message"
finally, push your local repository to the remote repository compare & submit a pull request
terminal commands
git push origin
Go to your repository on GitHub, you'll see a compare & pull request button. Click on that button.
Now submit the pull request.
For quick approval of the pull request, reach out to me on the mentioned social media channels.
_____ _ _ __ __
|_ _| | | | \ \ / /
| | | |__ __ _ _ __ | | __ \ V /___ _ _
| | | '_ \ / _` | '_ \| |/ / \ // _ \| | | |
| | | | | | (_| | | | | < | | (_) | |_| |
\_/ |_| |_|\__,_|_| |_|_|\_\ \_/\___/ \__,_|
______
| ___|
| |_ ___ _ __
| _/ _ \| '__|
| || (_) | |
\_| \___/|_|
______ _ _ _ _
| ___ \ (_) | | | | | |
| |_/ / ___ _ _ __ __ _ | |_| | ___ _ __ ___| |
| ___ \/ _ \ | '_ \ / _` | | _ |/ _ \ '__/ _ \ |
| |_/ / __/ | | | | (_| | | | | | __/ | | __/_|
\____/ \___|_|_| |_|\__, | \_| |_/\___|_| \___(_)
__/ |
|___/
if (youEnjoyed) {
// (star ⭐ & fork 🍽️) this repository.
// - Fork this repository by clicking on the fork button at the top of this page. This will create a copy of this repository in your account.
starThisRepository();
}components lib pages - for routing purposes layouts services utils assets hooks App Folder - You can handle all the page and API routes within this folder. src folder
All the non-routes folders will be Private Folders by prefixing their name with an underscore _components, _libs
src | app | | page.tsx | | layout.tsx | | (auth) | | | sign-in.tsx | | | sign-up.tsx | | profile | | | page.tsx | | | orders | | | | page.tsx | | api | | | order | | | | route.ts | | | etc | components | | ui | | | Footer.tsx | | | header.tsx | | | layout.tsx - kind of index.html | | | navbar.tsx | | | profile.tsx | | | signin.tsx | | | signup.tsx | | profile | | | profileImage.tsx | | orders | | | order.tsx | hooks | | useAuth.ts | | useCart.ts | lib | | posts.js | | | common methods | public | pages -> homepage -> The Pages Router has a file-system based router built on concepts of pages. When a file is added to the pages directory it's automatically available as a route. | | posts | | api | | | | hello.js | | | first-post | | tailwind | | _app -> define the global layout -> Custom App | | _document -> to control the initial response from the server -> Custom Document | | calculator -> another calorie route | | signin -> another route | | signup -> another route _error .js .jsx .tsx Custom Error Page 404 .js .jsx .tsx 404 Error Page 500 .js .jsx .tsx 500 Error Page
http://localhost:3000/tailwind The router will automatically route files named index to the root of the directory.
Layout Pattern -> The React model allows us to deconstruct a page into a series of components. Many of these components are often reused between pages. For example, you might have the same navigation bar and footer on every page.
{children} https://blog.logrocket.com/structure-scalable-next-js-project-architecture/ https://nextjs.org/docs/pages/building-your-application/routing/custom-app