Unleash Your Creative Vibes
Pixify is a scalable, full-stack social media application designed to enhance user interaction and creativity. Built with modern web technologies, this project showcases robust frontend integration with Appwrite, providing users with a seamless and engaging experience. With a focus on a sleek UI and responsive design, Pixify is set to grow and evolve.
- React: Library for building user interfaces.
- Redux: State management for predictable data flow.
- Vite: Fast build tool for modern web projects.
- shadcn: Styled components for creating a cohesive look.
- Tailwind CSS: Utility-first CSS framework for rapid UI development.
Here are the key packages used in the project:
{
"@radix-ui/react-toast": "^1.2.2",
"@tanstack/react-query": "^5.59.16",
"appwrite": "^16.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dropzone": "^14.2.10",
"react-hook-form": "^7.53.1",
"react-intersection-observer": "^9.13.1",
"react-router-dom": "^6.27.0",
"tailwind-merge": "^2.5.4",
"use-debounce": "^10.0.4",
"zod": "^3.23.8"
}To run this project, you will need to create a .env file in the root of your frontend directory with the following variables:
VITE_APPWRITE_PROJECT_ID=""
VITE_APPWRITE_URL=""
VITE_APPWRITE_STORAGE_ID=""
VITE_APPWRITE_DATABASE_ID=""
VITE_APPWRITE_USER_COLLECTION_ID=""
VITE_APPWRITE_POST_COLLECTION_ID=""
VITE_APPWRITE_SAVES_COLLECTION_ID=""
VITE_APPWRITE_FOLLOWERS_COLLECTION_ID="
VITE_APPWRITE_COMMENTS_COLLECTION_ID=""
- User Authentication: Secure login and registration managed by Appwrite.
- Real-time Interactions: Instant updates for a dynamic user experience.
- State Management: Redux for managing user states and application data seamlessly.
- Responsive Design: Mobile-first approach ensuring a polished look across devices.
- Smooth Animations: Implemented transitions for delightful transitions.
In Pixify, I plan to implement the following features:
- Follow and Following List: Easily view and manage followers with a click.
- Chat and Messaging Page: Enable direct communication between users.
- Stories or Time-Oriented Posts: Introduce temporary posts for users to share updates.
- More Operations in Comments: Add functionalities like deleting and copying comments.
- Collection for Saved Posts: Allow users to save and organize their favorite posts.
The project is organized as follows:
- Frontend: A React-based user interface, utilizing Redux for state management and styled using shadcn and Tailwind CSS.
- Node.js (v14 or higher)
- npm or yarn (for managing dependencies)
- Appwrite: Ensure you have an Appwrite server running.
-
Navigate to the frontend directory:
cd Frontend -
Install dependencies:
npm install
-
Start the development server:
npm run dev
dev: Starts the Vite development server
We welcome contributions to improve WonderWords! Please follow these steps to contribute:
- Fork the repository.
- Create a new branch:
git checkout -b feature/your-feature-name. - Make your changes and commit them:
git commit -m 'Add some feature'. - Push to the branch:
git push origin feature/your-feature-name. - Submit a pull request.
A big thank you to the developers of ReactJS, Tailwind CSS, NodeJS, Express, and Appwrite for their incredible tools.