Foadmape //full code sing up login screen

Anash alam

 




. Setup Firebase in Your App

Create a firebase.js file.

javascript
// firebase.js
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export const auth = firebase.auth();
export const database = firebase.database();

4. Create Authentication Screens

Login Screen

javascript
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { auth } from './firebase';

const LoginScreen = ({ navigation }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      await auth.signInWithEmailAndPassword(email, password);
      navigation.navigate('Roadmap');
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login</Text>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        style={styles.input}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
      <Button title="Sign Up" onPress={() => navigation.navigate('SignUp')} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 16 },
  title: { fontSize: 24, marginBottom: 20 },
  input: { borderWidth: 1, padding: 10, marginBottom: 10 },
});

export default LoginScreen;

Sign-Up Screen

javascript
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { auth } from './firebase';

const SignUpScreen = ({ navigation }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignUp = async () => {
    try {
      await auth.createUserWithEmailAndPassword(email, password);
      navigation.navigate('Roadmap');
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Sign Up</Text>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        style={styles.input}
        secureTextEntry
      />
      <Button title="Sign Up" onPress={handleSignUp} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 16 },
  title: { fontSize: 24, marginBottom: 20 },
  input: { borderWidth: 1, padding: 10, marginBottom: 10 },
});

export default SignUpScreen;

5. Roadmap Screen

javascript
import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import { database, auth } from './firebase';

const RoadmapScreen = () => {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    const userId = auth.currentUser.uid;
    const taskId = database.ref(`/users/${userId}/tasks`).push().key;

    const newTask = { id: taskId, task };
    database.ref(`/users/${userId}/tasks/${taskId}`).set(newTask);

    setTasks((prev) => [...prev, newTask]);
    setTask('');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Your Roadmap</Text>
      <TextInput
        placeholder="Add a new task"
        value={task}
        onChangeText={setTask}
        style={styles.input}
      />
      <Button title="Add Task" onPress={addTask} />
      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text style={styles.task}>{item.task}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  title: { fontSize: 24, marginBottom: 20 },
  input: { borderWidth: 1, padding: 10, marginBottom: 10 },
  task: { padding: 10, borderBottomWidth: 1 },
});

export default RoadmapScreen;

6. Navigation Setup

javascript
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './LoginScreen';
import SignUpScreen from './SignUpScreen';
import RoadmapScreen from './RoadmapScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
        <Stack.Screen name="Roadmap" component={RoadmapScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

This is a minimal starting point. You can expand it by adding features like progress tracking, timeline visualization, or integrating advanced APIs like Google Maps. Would you like help adding more functionality?


Roadmap App

Roadmap Layout Plan

Main Components:

  1. Header: Title and user profile/settings icon.
  2. Roadmap Timeline: A vertical scrollable timeline with milestones and tasks.
  3. Task Input Section: A field to add new tasks or milestones.
  4. Progress Indicator: Shows progress percentage for the roadmap.
  5. Floating Action Button (FAB): For quick task or milestone addition.

Code: Roadmap Layout

javascript
import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';

const RoadmapLayout = () => {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    if (task.trim()) {
      setTasks((prev) => [...prev, { id: Date.now().toString(), title: task }]);
      setTask('');
    }
  };

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.title}>My Roadmap</Text>
        <TouchableOpacity style={styles.profileButton}>
          <Text style={styles.profileText}>⚙</Text>
        </TouchableOpacity>
      </View>

      {/* Progress Indicator */}
      <View style={styles.progressContainer}>
        <Text style={styles.progressText}>
          Progress: {tasks.length > 0 ? Math.floor((tasks.filter(t => t.completed).length / tasks.length) * 100) : 0}%
        </Text>
      </View>

      {/* Roadmap Timeline */}
      <ScrollView contentContainerStyle={styles.timelineContainer}>
        {tasks.map((item, index) => (
          <View key={item.id} style={styles.taskContainer}>
            <View style={styles.timelineCircle} />
            <Text style={styles.taskText}>{`${index + 1}. ${item.title}`}</Text>
          </View>
        ))}
      </ScrollView>

      {/* Add Task Section */}
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Add a new task or milestone"
          value={task}
          onChangeText={setTask}
        />
        <Button title="Add" onPress={addTask} />
      </View>

      {/* Floating Action Button */}
      <TouchableOpacity style={styles.fab} onPress={addTask}>
        <Text style={styles.fabText}>+</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f9f9f9',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#6200ea',
  },
  title: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
  },
  profileButton: {
    backgroundColor: '#fff',
    borderRadius: 20,
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  profileText: {
    fontSize: 20,
    color: '#6200ea',
  },
  progressContainer: {
    padding: 16,
    backgroundColor: '#e0e0e0',
  },
  progressText: {
    fontSize: 16,
    color: '#333',
  },
  timelineContainer: {
    padding: 16,
  },
  taskContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  timelineCircle: {
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: '#6200ea',
    marginRight: 10,
  },
  taskText: {
    fontSize: 16,
    color: '#333',
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderTopWidth: 1,
    borderTopColor: '#ddd',
    backgroundColor: '#fff',
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
  },
  fab: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    backgroundColor: '#6200ea',
    width: 60,
    height: 60,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 3,
    elevation: 5,
  },
  fabText: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
});

export default RoadmapLayout;

Features of the Layout

  1. Timeline Visualization:

    • Displays tasks/milestones with a vertical line and circular markers.
    • Auto-arranges tasks in the order they are added.

  2. Progress Tracker:

    • Shows progress percentage based on completed tasks.

  3. Input Section:

    • Allows users to add tasks/milestones with a text input and button.

  4. Floating Action Button (FAB):

    • Quick access to adding tasks/milestones.

  5. Responsive Design:

    • Adapts to different screen sizes.

Would you like to integrate additional features, like editing tasks, animations, or connecting this layout to Firebase?

You said:
Xml
ChatGPT said:
ChatGPT

Here's an XML-based layout for a Roadmap App designed for Android, using XML for the UI. This layout uses a vertical timeline with milestones, a progress bar, and an input field for adding tasks.

roadmap_activity.xml

xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#F9F9F9">

    <!-- Header Section -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:background="#6200EA">

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My Roadmap"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:textStyle="bold"
            android:layout_weight="1" />

        <ImageView
            android:id="@+id/ivSettings"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/ic_settings"
            android:background="@drawable/circle_background"
            android:padding="8dp"
            android:contentDescription="Settings" />
    </LinearLayout>

    <!-- Progress Section -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:background="#E0E0E0">

        <TextView
            android:id="@+id/tvProgress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Progress: 0%"
            android:textSize="16sp"
            android:layout_weight="1"
            android:textColor="#333333" />

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:progress="0"
            android:max="100"
            android:progressDrawable="@drawable/progress_bar_style" />
    </LinearLayout>

    <!-- Timeline Section -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:padding="16dp">

        <LinearLayout
            android:id="@+id/roadmapContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!-- Dynamic task items will be added here -->
        </LinearLayout>
    </ScrollView>

    <!-- Input Section -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:background="#FFFFFF"
        android:elevation="4dp">

        <EditText
            android:id="@+id/etTask"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Add a new task or milestone"
            android:padding="10dp"
            android:background="@drawable/edittext_background"
            android:imeOptions="actionDone"
            android:inputType="text" />

        <Button
            android:id="@+id/btnAddTask"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Add"
            android:backgroundTint="#6200EA"
            android:textColor="#FFFFFF"
            android:layout_marginStart="8dp" />
    </LinearLayout>
</LinearLayout>

Drawables

1. circle_background.xml

xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:radius="20dp" />
</shape>

2. progress_bar_style.xml

xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="#DDDDDD" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dp" />
                <solid android:color="#6200EA" />
            </shape>
        </clip>
    </item>
</layer-list>

3. edittext_background.xml

xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#DDDDDD" />
    <corners android:radius="8dp" />
</shape>

Dynamic Content Handling

In your activity or fragment, dynamically populate the timeline container (roadmapContainer) with tasks or milestones.

Example Code:

java

LinearLayout roadmapContainer = findViewById(R.id.roadmapContainer);

Button btnAddTask = findViewById(R.id.btnAddTask);
EditText etTask = findViewById(R.id.etTask);

btnAddTask.setOnClickListener(v -> {
    String task = etTask.getText().toString().trim();
    if (!task.isEmpty()) {
        // Add new task to the timeline
        View taskView = LayoutInflater.from(this).inflate(R.layout.timeline_item, roadmapContainer, false);
        TextView tvTask = taskView.findViewById(R.id.tvTask);
        tvTask.setText(task);
        roadmapContainer.addView(taskView);
        etTask.setText("");
    }
});

timeline_item.xml

xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="8dp"
    android:layout_marginBottom="16dp">

    <View
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:background="@drawable/circle_background"
        android:layout_marginEnd="8dp" />

    <TextView
        android:id="@+id/tvTask"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Sample Task"
        android:textSize="16sp"
        android:textColor="#333333" />
</LinearLayout>

Features of This Layout

  1. Header with Settings Icon: For app navigation and customization.
  2. Progress Bar: Dynamic progress based on completed tasks.
  3. Scrollable Timeline: Lists milestones/tasks with a timeline layout.
  4. Add Task Section: A text input with a button for adding new tasks.
  5. Dynamic Task Addition: Supports adding and displaying tasks programmatically.

Would you like to enhance this layout with animations, Firebase integration, or other features?

0 Comments

Add a comment