Dev

.nvmrc

@@ -0,0 +1 @@
+22.6.0

README.md

@@ -1 +1,105 @@
-# ShareZoneApp
+# **ShareZoneApp**
+
+**ShareZoneApp** is a modern and innovative mobile application designed to enhance users' social media experience to the fullest. The platform combines essential social media features such as sharing posts, leaving comments, sending likes, receiving notifications, and updating profiles in one seamless package. Additionally, with its sleek design and user-friendly interface, the app offers personalized notifications and an enjoyable way to interact on social media. ShareZoneApp not only allows individuals to consume content but also empowers them to create unique posts and reach a broader audience. This platform strengthens social connections while providing a safe and engaging environment where everyone can express themselves freely and creatively.
+
+---
+
+## **Features**
+
+- User registration and login processes (with email and password verification).
+- Sharing and deleting posts.
+- Commenting on and liking posts.
+- Notifications for likes and comments.
+- Updating profile information.
+- Stylish and user-friendly design.
+
+---
+
+## **Technologies and Tools**
+
+Main technologies and tools used in this project:
+
+- **React Native (Expo):** Mobile application development.
+- **TypeScript:** A type-safe code base.
+- **Supabase:** Real-time database and user authentication.
+- **Git:** Version control system.
+- **ESLint & Prettier:** Maintaining code quality and formatting.
+- **Storybook:** Developing and documenting components in isolation.
+- **Husky, Commitlint & Lint-staged:** Automatic checking of commit messages and code changes.
+- **GitHub Workflow:** Automated processing for ESLint and Prettier.
+- **Yarn:** Package manager.
+- **Google Generative API:** Present tense control for commit messages.
+
+---
+
+
+## **Screen Recording**
+
+The video below shows the app's key features and user interactions:
+
+[Watch App Screen Recording](https://github.com/user-attachments/assets/b5bc7861-08d8-4d92-b86d-4ed26e5980bd)
+
+---
+
+## **Installation and Operation**
+
+To run the project in a local environment, follow the steps below:
+
+#### **1. Required Tools**
+- **Node.js** (v22 or above)
+- **Yarn** (for dependency management)
+- **Supabase account and project keys**
+- **Google Generative AI Api Key**
+
+#### **2. Clone Repository**
+```bash
+git https://github.com/mces58/ShareZoneApp.git
+cd ShareZoneApp
+```
+
+#### **3. Install Dependencies**
+```bash
+yarn install
+```
+
+#### **4. Set Environment Variables**
+Add the Supabase and Google Generative API keys required for the project to the ```.env``` file:
+```bash
+# Supabase Environment Variables
+SUPABASE_PROJECT_URL=your-supabase-url
+SUPABASE_ANON_KEY=your-supabase-anon-key
+
+# Google Generative AI API Key
+GOOGLE_GENERATIVE_AI_API_KEY=your-google-generative-ai-api-key
+```
+
+#### **5. Launch the App**
+```bash
+yarn start
+```
+
+---
+
+## **Project Structure**
+```bash
+/src
+  /assets       # Application icons and font files
+  /components   # Reusable components (Buttons, Cards, etc.)
+  /contexts     # React Context definitions
+  /navigations  # App navigation configurations
+  /screens      # Different screens (Login, Profile, Home, etc.)
+  /services     # API and Supabase connections
+  /supabase     # Supabase related operations and configurations
+  /utils        # Auxiliary functions
+```
+
+---
+
+## **Contributing**
+
+To contribute to the project, follow these steps:
+
+1. Fork the repository.
+2. Create a new branch. ```(git checkout -b feature)```
+3. Make your changes and commit. ```(git commit -m "feat(scope): add new feature")```
+4. Open a pull request.

src/components/inputs/Input.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Animated, StyleProp, StyleSheet, TextInput } from 'react-native';
+import { Animated, Platform, StyleProp, StyleSheet, TextInput } from 'react-native';
 
 import styled, { useTheme } from 'styled-components/native';
 
@@ -84,7 +84,14 @@ const Input: FC<InputProps> = ({
         : 0;
 
   useEffect(() => {
-    const toValueTop = isFocused || text ? -scaleByAspectRatio(heightNumber * 0.25) : 0;
+    const toValueTop =
+      isFocused || text
+        ? Platform.OS === 'ios'
+          ? -scaleByAspectRatio(heightNumber * 0.25)
+          : -scaleByAspectRatio(heightNumber * 0.2)
+        : Platform.OS === 'ios'
+          ? 0
+          : scaleByAspectRatio(3);
     const toValueLeft =
       isFocused || text ? -scaleByAspectRatio(2) : scaleByAspectRatio(2);
     const toValueFontSize =

src/screens/auth/styles/signin.ts

@@ -73,9 +73,10 @@ const createSigninStyles = (
       width: '95%',
       alignSelf: 'center',
       justifyContent: 'space-around',
+      gap: scaleProportionally(5),
     },
     [FlexStyles.FOOTER_IMAGE]: {
-      width: '40%',
+      width: '30%',
       alignItems: 'center',
     },
     [FlexStyles.FOOTER_ACTION]: {

src/screens/auth/tsx/Signin.tsx

@@ -8,7 +8,7 @@ import { scaleByAspectRatio } from 'src/utils';
 import SpacemanWithPlanetsSvg from 'assets/svgs/spaceman-with-planets.svg';
 import Icon from 'src/assets/icons';
 import { GradientButton } from 'src/components/buttons';
-import { Container } from 'src/components/containers';
+import { Container, Scroll } from 'src/components/containers';
 import { Form } from 'src/components/forms';
 import { GradientText, Text } from 'src/components/texts';
 import { Toast, ToastTypes } from 'src/components/toasts';
@@ -50,80 +50,82 @@ const Signin: FC<SigninProps> = ({ navigation }) => {
   }, []);
 
   return (
-    <Container flexStyle={styles.flex.container} viewStyle={styles.view.container}>
-      <SubHeader
-        title={t('global.back')}
-        theme={theme}
-        onPressHeaderIcon={() => navigation.goBack()}
-      />
-      <Container flexStyle={styles.flex.main}>
-        <Container flexStyle={styles.flex.form}>
-          <GradientText
-            text={t('screens.auth.signIn')}
-            colors={theme.common.color.defaultGradient2}
-            textStyle={styles.text.formHeader}
-          />
-          <Form
-            formFields={formFields}
-            onSubmit={handleSignin}
-            ref={formRef}
-            inputStyle={{
-              flex: styles.flex.formInput,
-              shadow: styles.shadow.formInput,
-              view: styles.view.formInput,
-            }}
-          />
-          {toast && (
-            <Toast
-              downHeight={-75}
-              message={toast.message}
-              type={toast.type}
-              icon={<Icon name="error" fillColor={theme.color.text} strokeWidth={0} />}
+    <Scroll>
+      <Container flexStyle={styles.flex.container} viewStyle={styles.view.container}>
+        <SubHeader
+          title={t('global.back')}
+          theme={theme}
+          onPressHeaderIcon={() => navigation.goBack()}
+        />
+        <Container flexStyle={styles.flex.main}>
+          <Container flexStyle={styles.flex.form}>
+            <GradientText
+              text={t('screens.auth.signIn')}
+              colors={theme.common.color.defaultGradient2}
+              textStyle={styles.text.formHeader}
             />
-          )}
-        </Container>
-        <Container flexStyle={styles.flex.footer}>
-          <Container flexStyle={styles.flex.footerImage}>
-            <SpacemanWithPlanetsSvg
-              width={scaleByAspectRatio(190)}
-              height={scaleByAspectRatio(190)}
+            <Form
+              formFields={formFields}
+              onSubmit={handleSignin}
+              ref={formRef}
+              inputStyle={{
+                flex: styles.flex.formInput,
+                shadow: styles.shadow.formInput,
+                view: styles.view.formInput,
+              }}
             />
+            {toast && (
+              <Toast
+                downHeight={-75}
+                message={toast.message}
+                type={toast.type}
+                icon={<Icon name="error" fillColor={theme.color.text} strokeWidth={0} />}
+              />
+            )}
           </Container>
-          <Container flexStyle={styles.flex.footerAction}>
-            <Container flexStyle={styles.flex.footerButtonContainer}>
-              <GradientButton
-                text={t('screens.auth.signIn')}
-                colors={theme.common.color.defaultGradient2}
-                onPress={handleFormSubmit}
-                loading={loading}
-                disabled={loading}
-                flexStyle={styles.flex.button}
-                shadowStyle={styles.shadow.button}
-                textStyle={styles.text.button}
-                viewStyle={styles.view.button}
+          <Container flexStyle={styles.flex.footer}>
+            <Container flexStyle={styles.flex.footerImage}>
+              <SpacemanWithPlanetsSvg
+                width={scaleByAspectRatio(190)}
+                height={scaleByAspectRatio(190)}
               />
-              <Container flexStyle={styles.flex.rowText}>
-                <Text
-                  text={t('screens.auth.dontHaveAnAccount')}
-                  textStyle={styles.text.footer}
-                />
-                <GradientText
-                  text={t('screens.auth.signUp')}
+            </Container>
+            <Container flexStyle={styles.flex.footerAction}>
+              <Container flexStyle={styles.flex.footerButtonContainer}>
+                <GradientButton
+                  text={t('screens.auth.signIn')}
                   colors={theme.common.color.defaultGradient2}
-                  onPress={() => {
-                    if (!formRef.current) return;
-                    navigation.navigate(RootNavigations.SIGNUP);
-                    formRef.current.reset();
-                  }}
-                  textStyle={styles.text.link}
+                  onPress={handleFormSubmit}
+                  loading={loading}
+                  disabled={loading}
+                  flexStyle={styles.flex.button}
+                  shadowStyle={styles.shadow.button}
+                  textStyle={styles.text.button}
+                  viewStyle={styles.view.button}
                 />
+                <Container flexStyle={styles.flex.rowText}>
+                  <Text
+                    text={t('screens.auth.dontHaveAnAccount')}
+                    textStyle={styles.text.footer}
+                  />
+                  <GradientText
+                    text={t('screens.auth.signUp')}
+                    colors={theme.common.color.defaultGradient2}
+                    onPress={() => {
+                      if (!formRef.current) return;
+                      navigation.navigate(RootNavigations.SIGNUP);
+                      formRef.current.reset();
+                    }}
+                    textStyle={styles.text.link}
+                  />
+                </Container>
               </Container>
+              <SocialMedia text={t('screens.auth.followOn')} theme={theme} />
             </Container>
-            <SocialMedia text={t('screens.auth.followOn')} theme={theme} />
           </Container>
         </Container>
       </Container>
-    </Container>
+    </Scroll>
   );
 };