How to push MERN/MEAN projects to GitHub?

Hrithik Bansal — Sat, 04 Feb 2023 14:39:03 +0000

To push a new project to GitHub repository, follow these steps:

You need to understand that you're not supposed to commit all files to GitHub. So, you need to ignore unnecessary files. For example, in React projects, you can totally ignore "node_modules" folder which contains all the files you installed as dependencies because it is super heavy and unnecessary. The reason is that all the dependencies are specified in "package.json" file which means that when you or someone else download that project in future, you can reinstall all the dependencies locally on your machine without polluting GitHub using npm install command. To ignore unnecessary files and folders, create a file named ".gitignore" in the root of your project. In the context of React application, you can include "node_modules" inside that file. Of course, there is more to this (such as hiding API keys and sensitive information), but for starters ignoring "node_modules" is pretty sufficient.

1: Perform a git init command in the root folder of the existing project.

2: Use git status command to displays the state of the working directory and the staging area.

3: Create a .gitignore file touch .gitignore that specifies intentionally untracked files like node_modules that Git should ignore.

4: Add your files to staging area (a queue where your files "chill" before you decide to actually push it to GitHub).
git add .

5: Now, commit the files to your local repository. Write a meaningful message in quotation marks. Then, put the terminal aside (don't close it) and open your browser.
git commit -m "This is my initial commit."

6: To push a project to GitHub, you must first create a GitHub repository. To do this, simply click the green “Create repository” button in GitHub’s online console and provide a repository name.

For this example, we will name the repository DEMO.

7: To allow your existing project to synchronize with GitHub, issue a git remote add command to configure a reference from you local Git installation to the repository on GitHub.

8: Remember the terminal that you left aside? Paste the first line from GitHub under "…or push an existing repository from the command line".

git remote add origin https://github.com/yourgithubusername/REPOSITORYNAME.git

9: git branch -M main

10: Push the first commit to GitHub
git push -u origin main

Verify the GitHub push

To verify that the existing project was pushed to GitHub successfully, log into the GitHub website and browse the repository. All of the files from your existing project should be visible on GitHub’s.

And that’s how easy it is to push an existing project to a GitHub repository.

HOW TO BECOME A GREAT FRONTEND DEVELOPER?

Hrithik Bansal — Sat, 14 Jan 2023 13:52:56 +0000

Before starting learning about development we should understand what are the main components or skills needed to be a good developer. We know the front end is what we see on our browser or application screen and there are many technologies available to do that. The first thing that comes on the path is learning programming or scripting language that tells computers what to do and how to do.

In our case, we want to be a front-end developer. Then there are many ways of building a frontend of any website or application. Let's see step by step what they are -

Learn the Basics - HTML

Learning HTML is our first step in the journey of becoming a front-end developer. In simple words, this defines the skeleton of the website.

Learn Basics of HTML

Understand the Structure and Tags

Learn about Forms

Semantic HTML

SEO (Search Engine Optimization)

Learn the Basics - CSS

After learning HTML the next step is learning CSS ( Cascading Style Sheets ). This will beautify the skeleton of the website which we have designed using HTML. I am sharing some important topics to learn -

FlexBox
Grid
Media Queries
Pseudo Elements
Pseudo Classes

Learn the Basics - JavaScript

Now you can build basic or static websites. To add functionality that we will learn JavaScript. If you want to be a good front-end developer this language will be your good friend. Since I started working in javaScript I fall in love with it. It has a lot to learn but here are a few important topics with which you can start jour journey -

Learn Basic Syntax
DOM Manipulation
Fetch API / Ajax
Async Await
Event Listeners
ES6+ JavaScript
Promises
Classes
Array Methods
Scoping
Hoisting
Closures

Hurry !! you have became a front-end developer and you can build amazing websites using the skills you have learned so far.

Now you can stop your journey here or you can continue learning some amazing stuff that will improve your development. I am sharing the steps you can follow if you want to continue your journey toward learning more advanced tech skills.

Learn any CSS Framework

CSS is enough for styling but if you want to make your development fast then you can use the CSS frameworks -

Bootstrap
Tailwind
Materialize
Bulma
Semantic UI
Foundation

Learn any CSS Preprocessor mostly SASS and SCSS

SASS / SCSS
Postcss
Less
Stylus
Stylecow

Now you are good with styling libraries or frameworks. Before moving forward in our learning journey learn some additional stuff that will improve your development skills and will save you a lot of time during development.

Learn basic usage of Version Control System

Git
GitHub

Pick a JavaScript Framework / Library

The most popular ones:

React
Vue
Angular
Svelte
Meteor
Remix

Basic things to learn in React

Components
Vue
JSX
State
Events
Conditional Rendering
useState
useEffect
useRef
useContext
useReducer
useMemo
useCallback

Learn some of the React UI Frameworks

Material UI
Ant Design
Chakra UI
React Bootstrap
Rebass
Blueprint
Semantic UI React

Learn to use popular React packages

React Router
React Query
Axios
React Hook Form
Styled Components
Storybook
Framer Motion

Learn how to manage state in React with state management tools

Redux
MobX
Hookstate
Recoil
Akita

Things to learn after learning React

Next JS
Gatsby
TypeScript
React Native
Electron

Important things to learn in Next JS

Static Site Generation
Server Side Rendering
Incremental Static Regeneration
Dynamic Pages
CSS / SASS Modules
Lazy loading Modules
API Routes

Learn to test your apps with some of these libraries/frameworks

Jest
Testing Library
Cypress
Enzyme
Jasmine
Mocha

Learn to deploy your websites

Netlify
Vercel
Firebase
GitHub Pages
Heroku
Render

DEV Community: Hrithik Bansal

How to push MERN/MEAN projects to GitHub?

To push a new project to GitHub repository, follow these steps:

Verify the GitHub push

HOW TO BECOME A GREAT FRONTEND DEVELOPER?