Skip to content
BranchesTags

Repository files navigation

My Awesome YouTube Channel

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

About Me

I'm Sam, and I'm passionate about product engineering and web development. I create videos that will help you learn web development.

What You'll Find Here

  • [ 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.]

About the app

Implemented appwrite features Welcome to your React + Vite project! This template sets up a minimal environment for developing React applications quickly and efficiently, featuring Hot Module Replacement (HMR) for a smooth development experience.

📦 What are the Official Plugins?

To enhance your project, you have two official plugins available:

  1. @vitejs/plugin-react:

    • Uses Babel to enable Fast Refresh, which means your changes will reflect in real time without losing your component state.

  2. @vitejs/plugin-react-swc:

    • Utilizes SWC, a super-fast compiler, to achieve even quicker refresh times.

🛠 Getting Started

Step 1: Create Your Project

To create a new React project using Vite, open your terminal and run the following commands:

# Create a new project with the React template
npm create vite@latest appwrite-demo -- --template react

# Navigate into your project directory
cd appwrite-demo

# Start the development server and open your project in a browser on port 300
npm run dev -- --open --port 300

# Install the Appwrite SDK
npm install appwrite

Step 2: Set Up Your Project ID

APIs https://cloud.appwrite.io/v1 https://cloud.appwrite.io/v1/account - register - POST/GET https://cloud.appwrite.io/v1/account/sessions/email - session create login -POST https://cloud.appwrite.io/v1/account/sessions/current - logout - DELETE https://cloud.appwrite.io/v1/locale https://cloud.appwrite.io/v1/users To interact with the Appwrite services, you will need a Project ID. Here’s how to obtain one:

  1. Create an Organization: Go to the Appwrite console and create an organization.
  2. Create a Project: Under the organization, create a new project.

You can manage your organization and projects at the following link:

📄 Important API Endpoints

To work with Appwrite, you'll need to use specific API endpoints. Here are some key ones to get started:

1. User Account Management

  • Register a New Account:

    • Endpoint: POST /v1/account

  • Create a Session with Email:

    • Endpoint: POST /v1/account/sessions/email
    • Request Example: 
      POST /v1/account/sessions/email
Content-Type: application/json
X-Appwrite-Project: [PROJECT_ID]

{
  "email": "example@email.com",
  "password": "password"
}

2. Session Management

  • Get Current Session:

    • Endpoint: GET /v1/account/sessions/current

  • Logout:

    • Endpoint: DELETE /v1/account/sessions/current

3. Database Operations

  • Fetch Documents:
    • Endpoint: 
      GET /v1/databases/{databaseId}/collections/{collectionId}/documents
Content-Type: application/json
X-Appwrite-Project: [PROJECT_ID]
X-Appwrite-Key: [API_KEY]

4. File Storage Operations

  • Upload Files:
    • Endpoint: 
      POST /v1/storage/buckets/default/files
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary
X-Appwrite-Project: [PROJECT_ID]

5. Preview Uploaded Files:

  • Use the following HTML to display a preview of your uploaded file: 
    <img src="[ENDPOINT]/v1/storage/buckets/[BUCKET_ID]/files/[FILE_ID]/preview?project=[PROJECT_ID]" />

🌐 Helpful Links

- **Appwrite Authentication:** Used to authenticate users via Appwrite credentials and manage login sessions securely. handling user sign-ups, and session management securely. enabling secure login and account management. handle user registration. This ensured that only authorized team members could access project-specific information.,, allowing users to manage their accounts effortlessly with options for OAuth providers like Google, GitHub, and more. find the active session details of the user. For Security we can add that. Secure login with multiple methods, including email/password, SMS, and OAuth 

- **Appwrite  SDK:** Facilitates communication with the Appwrite API, enabling secure and efficient user authentication and session management  enabling secure login and user session management. 

- **Appwrite Databases**:  
  Used to create and store list of logins in the `manager` collection, including attributes such as `password_id`, `email_id`, and `description`. Manages and stores user data securely with robust backend support. store the details of all passwords in the backend.  store the user data and transaction history of the users.    manages user data, including code snippets, project files, and collaboration history. It ensures that user data is securely stored and can be retrieved or updated instantly. Appwrite queries Used to filter the schemes based on the Input. Store, query, and manage data with a scalable database 

- **Appwrite Storage**: 
 - for storing any images in the database. for file management within projects. This allowed team members to easily upload, store, and share project-related documents and assets.  handle the creation, storage, and retrieval of project files. Users can upload, edit, and save files, which are securely stored on Appwrite’s cloud infrastructure. Utilized for storing and serving content. Used to securely store and retrieve important data. Upload and manage files with advanced compression, encryption, and image transformations 

- **Appwrite Real-Time API**:  
  Utilized to ensure that things are updated in real time across all connected users as soon as a new thing is added to the database. real-time database functionality enables instant synchronization of code changes, ensuring that all users collaborating on a project see updates in real-time. Respond to server events in real-time 
 
- **Appwrite Functions**
To handle backend connectivity. Deploy and scale serverless functions in secure, isolated runtimes.

- **Appwrite Notifications**
Send and schedule email, SMS, and push notifications 

- **Appwrite Users**
Manage project users, including searching, blocking, viewing info, and editing preferences.
/v1/graphql
https://cloud.appwrite.io/v1/locale
https://cloud.appwrite.io/console/
https://appwrite.io/docs

You're now ready to start developing your React application with Vite! Enjoy the process, explore the features, and have fun building! 🎊

  • Appwrite: As the backend service for secure data management, including databases and authentication.

Usage of Appwrite

  • Appwrite Authentication: Manages user authentication and session handling securely, allowing users to log in with options like email/password, SMS, or OAuth providers such as Google and GitHub.

  • Appwrite SDK: Facilitates secure communication with the Appwrite API, ensuring efficient user authentication and session management.

  • Appwrite Databases: Creates and stores login information in a manager collection, securely managing user data such as passwords and transaction history.

  • Appwrite Storage: Manages file uploads, allowing users to securely store and share project-related documents and images.

  • Appwrite Real-Time API: Ensures instant updates across all connected users whenever new data is added to the database, enhancing collaboration.

  • Appwrite Functions: Enables serverless backend operations, ensuring scalability and security.

  • Appwrite Notifications: Facilitates sending and scheduling of email, SMS, and push notifications.

  • Appwrite Users: Allows management of project users, including searching, blocking, and editing preferences.

Subscribe and Stay Updated!

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!

!Subscribe to My Channel

Connect with Me

Feel free to reach out, comment on videos, and share your thoughts. I appreciate your support! 🙌

License

This project is licensed under the MIT License.

If you have any questions or need further assistance, feel free to ask! 🚀

Steps to contribute and generate PR(pull request)

clone the repository

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

create a branch on your local repository to solve a problem.

Terminal commands

git checkout -b your_new_branch_name

add & commit

add your changes(folder) to that branch. Make necessary changes and commit those changes. Terminal commands

git add .
git commit -m "your-commit-message"

push changes to github

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();
}

happy coding fellas!!💕✨

About

No description or website provided.

Topics

hacktoberfest

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

1 watching

Forks

3 forks
Report repository

Releases

Packages

Used by

Contributors

Languages